{"id":19144,"date":"2025-06-05T19:45:49","date_gmt":"2025-06-05T17:45:49","guid":{"rendered":"https:\/\/virtual.usac.edu.gt\/dedev\/?page_id=19144"},"modified":"2025-06-06T18:25:24","modified_gmt":"2025-06-06T16:25:24","slug":"formacion-tecnopedagogica2025","status":"publish","type":"page","link":"https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/","title":{"rendered":"Formacion-tecnopedagogica2025"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n Formaci\u00f3n Tecnopedag\u00f3gica - USAC<\/title>\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH\" crossorigin=\"anonymous\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\r\n\/* Estilos CSS personalizados *\/\r\n\/* Estilos CSS personalizados *\/\r\n:root {\r\n \/* Colores base USAC *\/\r\n --usac-blue-dark: #21246a; \/* Azul oscuro para t\u00edtulos principales *\/\r\n --usac-blue-medium: #3f51b5; \/* Azul medio para subt\u00edtulos *\/\r\n --usac-blue-light: #007bff; \/* Azul claro para botones principales y acentos *\/\r\n\r\n \/* Colores sem\u00e1nticos con nombres m\u00e1s descriptivos *\/\r\n --usac-cyan-blue: #0099df; \/* Usado para \"disponible\" (cian\/azul verdoso) *\/\r\n --usac-neutral-gray: #6b6b6a; \/* Usado para \"solicitar\" (gris neutral) *\/\r\n --usac-info-purple: #581271; \/* Usado para \"saber m\u00e1s\" (morado oscuro) *\/\r\n\r\n \/* Sombras de tarjeta *\/\r\n --card-shadow: 0 8px 16px rgba(0,0,0,0.1);\r\n --card-hover-shadow: 0 12px 24px rgba(0,0,0,0.2);\r\n\r\n \/* Colores de hover refinados para cada color sem\u00e1ntico *\/\r\n --usac-cyan-blue-hover: #0077ba; \/* Hover para --usac-cyan-blue *\/\r\n --usac-neutral-gray-hover: #4e4e4e; \/* Hover para --usac-neutral-gray *\/\r\n --usac-info-purple-hover: #450f5a; \/* Hover para --usac-info-purple *\/\r\n}\r\nbody {\r\n \/* Intentamos usar Century Gothic, con fuentes de respaldo *\/\r\n font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;\r\n background-color: #f0f2f5; \/* Fondo m\u00e1s suave *\/\r\n color: #333;\r\n}\r\n\r\n\/* =========================================================\r\n === REGLAS PARA QUE EL ENCABEZADO SUPERIOR NO CAMBIE ===\r\n ========================================================= *\/\r\n\/* Reestablece la fuente para los elementos del encabezado superior *\/\r\n\/* Esto intentar\u00e1 que use la fuente predeterminada del sistema o la del tema *\/\r\n.site-header-above-section-center,\r\n.site-header-above-section-center a,\r\n.site-header-above-section-center span,\r\n.site-header-above-section-center div {\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; \/* Restaura a fuentes de sistema comunes *\/\r\n font-weight: normal; \/* Asegura que el peso de la fuente sea normal *\/\r\n \r\n}\r\n\r\n\/* Ajustamos los pesos de la fuente para Century Gothic (Reglas generales) *\/\r\nh1, h2, h3, h4, h5, h6,\r\n.section-title,\r\n.subsection-title,\r\n.header-title,\r\n.main-nav-buttons .btn,\r\n.filter-btn.active,\r\n.curso-card .card-title,\r\n.microcredencial-content-box h4,\r\n.course-segment-title,\r\n.course-type-block h4 {\r\n font-weight: bold; \/* Para texto en negrita (Bold) *\/\r\n}\r\n\r\n\/* Esta regla mantiene 'normal' para los botones generales de la tarjeta.\r\n Nuestras reglas m\u00e1s espec\u00edficas para los botones de la tarjeta la anular\u00e1n. *\/\r\n.filter-btn,\r\n.curso-card .card-buttons .btn {\r\n font-weight: normal; \/* Para texto regular (Regular) *\/\r\n}\r\n\r\n\/* Estilos espec\u00edficos para texto \"Light\" si Century Gothic Light est\u00e1 disponible *\/\r\n.lead,\r\n.curso-card .card-meta,\r\n.curso-card .card-text-description,\r\nfooter {\r\n font-weight: normal;\r\n}\r\n\r\n\/* --- ESTILOS CONSOLIDADOS PARA LOS BOTONES DE TARJETA (ALTA ESPECIFICIDAD) --- *\/\r\n\/* NOTA: Estos selectores son m\u00e1s espec\u00edficos que .curso-card .card-buttons .btn\r\n y por lo tanto, sus propiedades tendr\u00e1n prioridad. *\/\r\n.curso-card .card-buttons .btn-saber-mas,\r\n.curso-card .card-buttons .btn-ir-curso,\r\n.curso-card .card-buttons .btn-solicitar {\r\n \/* Dise\u00f1o b\u00e1sico *\/\r\n border-width: 1px;\r\n border-style: solid;\r\n border-radius: 6px; \/* Esquinas ligeramente redondeadas para una apariencia moderna *\/\r\n padding: 10px 20px; \/* Buen espacio interno *\/\r\n font-size: 0.95rem; \/* Tama\u00f1o de fuente ligeramente ajustado *\/\r\n font-weight: 900; \/* \u00a1Negrita definida por la especificidad! *\/\r\n \/* text-shadow: 0 0 1px rgba(0,0,0,0.3); *\/ \/* Sombra de texto sutil si necesitas que resalte m\u00e1s *\/\r\n display: inline-flex; \/* Permite alinear \u00edconos y texto *\/\r\n align-items: center; \/* Centra verticalmente el contenido *\/\r\n justify-content: center; \/* Centra horizontalmente el contenido si hay espacio extra *\/\r\n cursor: pointer; \/* Indica que es un elemento clickeable *\/\r\n text-decoration: none; \/* Elimina el subrayado por defecto y de frameworks *\/\r\n\r\n \/* El color blanco va aqu\u00ed *\/\r\n color: white; \/* Color blanco definido por la especificidad *\/\r\n\r\n \/* Transiciones para interacciones suaves en todas las propiedades relevantes *\/\r\n transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, filter 0.3s ease;\r\n\r\n \/* Sombra por defecto sutil para darle profundidad *\/\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\r\n}\r\n\r\n\/* Estilos espec\u00edficos para el bot\u00f3n \"Saber M\u00e1s\" *\/\r\n.curso-card .card-buttons .btn-saber-mas { \/* Mayor especificidad *\/\r\n background-color: var(--usac-info-purple);\r\n border-color: var(--usac-info-purple);\r\n}\r\n.curso-card .card-buttons .btn-saber-mas:hover { \/* Mayor especificidad *\/\r\n background-color: var(--usac-info-purple-hover);\r\n border-color: var(--usac-info-purple-hover);\r\n color: white; \/* Mantenemos blanco *\/\r\n transform: translateY(-3px); \/* Se eleva un poco m\u00e1s al pasar el mouse *\/\r\n box-shadow: 0 6px 12px rgba(0,0,0,0.3); \/* La sombra se agranda y eleva *\/\r\n text-decoration: none; \/* Asegurar no subrayado en hover *\/\r\n}\r\n.curso-card .card-buttons .btn-saber-mas:active { \/* Mayor especificidad *\/\r\n background-color: var(--usac-info-purple-hover); \/* Mantener el color de hover *\/\r\n color: white; \/* \u00a1Aseguramos que el texto sea BLANCO en estado activo! *\/\r\n transform: translateY(1px); \/* Efecto de \"presi\u00f3n\" al hacer clic *\/\r\n filter: none; \/* Eliminamos el filtro de brillo *\/\r\n box-shadow: 0 1px 2px rgba(0,0,0,0.25); \/* Sombra m\u00e1s peque\u00f1a al presionar *\/\r\n transition: transform 0.1s ease, filter 0.1s ease, box-shadow 0.1s ease, color 0.1s ease; \/* Transici\u00f3n r\u00e1pida para el click *\/\r\n text-decoration: none; \/* Asegurar no subrayado en active *\/\r\n}\r\n.curso-card .card-buttons .btn-saber-mas:focus { \/* Mayor especificidad *\/\r\n outline: none; \/* Remueve el outline por defecto *\/\r\n box-shadow: 0 0 0 3px rgba(var(--usac-info-purple-hover), 0.5); \/* Anillo de enfoque con transparencia *\/\r\n text-decoration: none; \/* Asegurar no subrayado en focus *\/\r\n}\r\n\r\n\/* Estilos espec\u00edficos para el bot\u00f3n \"Ir al Curso\" *\/\r\n.curso-card .card-buttons .btn-ir-curso { \/* Mayor especificidad *\/\r\n background-color: var(--usac-cyan-blue);\r\n border-color: var(--usac-cyan-blue);\r\n}\r\n.curso-card .card-buttons .btn-ir-curso:hover { \/* Mayor especificidad *\/\r\n background-color: var(--usac-cyan-blue-hover);\r\n border-color: var(--usac-cyan-blue-hover);\r\n color: white;\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 12px rgba(0,0,0,0.3);\r\n text-decoration: none;\r\n}\r\n.curso-card .card-buttons .btn-ir-curso:active { \/* Mayor especificidad *\/\r\n background-color: var(--usac-cyan-blue-hover);\r\n color: white;\r\n transform: translateY(1px);\r\n filter: none;\r\n box-shadow: 0 1px 2px rgba(0,0,0,0.25);\r\n transition: transform 0.1s ease, filter 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;\r\n text-decoration: none;\r\n}\r\n.curso-card .card-buttons .btn-ir-curso:focus { \/* Mayor especificidad *\/\r\n outline: none;\r\n box-shadow: 0 0 0 3px rgba(var(--usac-cyan-blue-hover), 0.5);\r\n text-decoration: none;\r\n}\r\n\r\n\/* Estilos espec\u00edficos para el bot\u00f3n \"Solicitar\" *\/\r\n.curso-card .card-buttons .btn-solicitar { \/* Mayor especificidad *\/\r\n background-color: var(--usac-neutral-gray);\r\n border-color: var(--usac-neutral-gray);\r\n}\r\n.curso-card .card-buttons .btn-solicitar:hover { \/* Mayor especificidad *\/\r\n background-color: var(--usac-neutral-gray-hover);\r\n border-color: var(--usac-neutral-gray-hover);\r\n color: white;\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 12px rgba(0,0,0,0.3);\r\n text-decoration: none;\r\n}\r\n.curso-card .card-buttons .btn-solicitar:active { \/* Mayor especificidad *\/\r\n background-color: var(--usac-neutral-gray-hover);\r\n color: white;\r\n transform: translateY(1px);\r\n filter: none;\r\n box-shadow: 0 1px 2px rgba(0,0,0,0.25);\r\n transition: transform 0.1s ease, filter 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;\r\n text-decoration: none;\r\n}\r\n.curso-card .card-buttons .btn-solicitar:focus { \/* Mayor especificidad *\/\r\n outline: none;\r\n box-shadow: 0 0 0 3px rgba(var(--usac-neutral-gray-hover), 0.5);\r\n text-decoration: none;\r\n}\r\n\r\n\/* Consideraciones para \u00edconos dentro de los botones *\/\r\n\/* Tambi\u00e9n les damos mayor especificidad si es necesario para evitar conflictos *\/\r\n.curso-card .card-buttons .btn-saber-mas .fas,\r\n.curso-card .card-buttons .btn-ir-curso .fas,\r\n.curso-card .card-buttons .btn-solicitar .fas {\r\n font-size: 1.1em;\r\n transition: transform 0.3s ease;\r\n}\r\n\r\n\/* Ejemplo de animaci\u00f3n de \u00edcono al pasar el mouse para los botones de tarjeta *\/\r\n.curso-card .card-buttons .btn-saber-mas:hover .fas,\r\n.curso-card .card-buttons .btn-ir-curso:hover .fas,\r\n.curso-card .card-buttons .btn-solicitar:hover .fas {\r\n transform: translateX(3px);\r\n}\r\n\r\n\r\n\/* --- REGLAS GENERALES Y DE DISE\u00d1O DE SECCIONES (ordenadas para claridad) --- *\/\r\n\r\n.hidden {\r\n display: none !important; \/* Mantenemos !important aqu\u00ed ya que 'hidden' es un utility class. *\/\r\n}\r\n\r\n.section-title {\r\n margin-top: 2.5rem;\r\n margin-bottom: 1.5rem;\r\n color: var(--usac-blue-dark);\r\n font-weight: bold;\r\n position: relative;\r\n padding-bottom: 0.5rem;\r\n text-align: center;\r\n}\r\n.section-title::after {\r\n content: '';\r\n position: absolute;\r\n left: 50%;\r\n bottom: 0;\r\n transform: translateX(-50%);\r\n width: 80px;\r\n height: 4px;\r\n background-color: var(--usac-blue-medium);\r\n border-radius: 2px;\r\n}\r\n\r\n.subsection-title {\r\n font-weight: bold;\r\n margin-top: 2rem;\r\n margin-bottom: 1rem;\r\n color: var(--usac-blue-medium);\r\n border-left: 5px solid var(--usac-blue-medium);\r\n padding-left: 10px;\r\n margin-left: 1rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n}\r\n\r\n\/* --- ESTILOS PARA EL HEADER\/HERO (SECCI\u00d3N SUPERIOR) --- *\/\r\n.hero-section {\r\n background: linear-gradient(to right, #e3f2fd, #d1e5f8);\r\n padding: 3rem 0;\r\n text-align: center;\r\n border-bottom: 5px solid var(--usac-blue-light);\r\n box-shadow: 0 4px 10px rgba(0,0,0,0.05);\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n.hero-section::before {\r\n content: \"\\f007\";\r\n font-weight: 900;\r\n position: absolute;\r\n top: 20%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n font-size: 15rem;\r\n color: rgba(255, 255, 255, 0.2);\r\n z-index: 0;\r\n pointer-events: none;\r\n}\r\n.header-content {\r\n position: relative;\r\n z-index: 1;\r\n}\r\n.header-title {\r\n color: var(--usac-blue-dark);\r\n font-weight: bold;\r\n font-size: 2.8rem;\r\n margin-bottom: 0.5rem;\r\n}\r\n.lead {\r\n color: #000000;\r\n font-size: 1.1rem;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n font-weight: normal;\r\n}\r\n\r\n\/* --- ESTILOS PARA BOTONES DE NAVEGACI\u00d3N PRINCIPAL --- *\/\r\n.main-nav-buttons .btn {\r\n font-size: 1.1rem;\r\n padding: 0.8rem 1.8rem;\r\n border-radius: 0.75rem;\r\n font-weight: bold;\r\n background-color: var(--usac-blue-medium);\r\n color: white;\r\n border: 2px solid var(--usac-blue-medium);\r\n transition: all 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.6rem;\r\n justify-content: center;\r\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\r\n}\r\n.main-nav-buttons .btn:hover {\r\n background-color: var(--usac-blue-dark);\r\n border-color: var(--usac-blue-dark);\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 12px rgba(0,0,0,0.25);\r\n}\r\n.main-nav-buttons .btn.active-section {\r\n background-color: var(--usac-blue-dark);\r\n border-color: var(--usac-blue-dark);\r\n box-shadow: inset 0 3px 7px rgba(0,0,0,0.4), 0 0 0 4px rgba(0,123,255,0.3);\r\n transform: translateY(0);\r\n cursor: default;\r\n font-size: 1.2rem;\r\n}\r\n\r\n\/* --- ESTILOS PARA BOTONES DE FILTRO DE CATEGOR\u00cdA (en Cursos) --- *\/\r\n.filters .btn {\r\n margin: 0.35rem;\r\n min-width: 120px;\r\n font-size: 0.95rem;\r\n padding: 0.6rem 1.2rem;\r\n border-radius: 0.5rem;\r\n background-color: #f0f2f5;\r\n color: #555;\r\n border: 1px solid #c9d2de;\r\n transition: all 0.2s ease;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n font-weight: normal;\r\n}\r\n.filters .btn:hover:not(.active) {\r\n background-color: #e2e6ea;\r\n border-color: #b0c0ce;\r\n transform: translateY(-1px);\r\n}\r\n.filter-btn.active {\r\n background-color: var(--usac-blue-light);\r\n color: white;\r\n border-color: var(--usac-blue-light);\r\n cursor: default;\r\n box-shadow: inset 0 1px 4px rgba(0,0,0,0.25);\r\n font-weight: bold;\r\n transform: none;\r\n}\r\n.filter-btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n\/* Estilo del contador dentro del bot\u00f3n de filtro - M\u00c1S SUTIL *\/\r\n.filters .btn .badge {\r\n font-size: 0.7em;\r\n padding: 0.3em 0.6em;\r\n border-radius: 0.5rem;\r\n background-color: rgba(0, 0, 0, 0.08);\r\n color: #555;\r\n margin-left: 0.5rem;\r\n font-weight: normal;\r\n transition: background-color 0.2s, color 0.2s;\r\n}\r\n.filter-btn.active .badge {\r\n background-color: rgba(255, 255, 255, 0.25);\r\n color: white;\r\n}\r\n\r\n\/* --- ESTILOS PARA TARJETAS Y BOTONES (secci\u00f3n .curso-card .card-buttons .btn ya tratada arriba) --- *\/\r\n.curso-card .card {\r\n border: none;\r\n border-radius: 1rem;\r\n overflow: hidden;\r\n box-shadow: var(--card-shadow);\r\n transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n background-color: #ffffff;\r\n}\r\n.curso-card .card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: var(--card-hover-shadow);\r\n}\r\n.curso-card .card-img-container {\r\n position: relative;\r\n width: 100%;\r\n padding-bottom: 75%;\r\n overflow: hidden;\r\n background-color: #e9ecef;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.curso-card .card-img-top {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.3s ease;\r\n}\r\n.curso-card .card:hover .card-img-top {\r\n transform: scale(1.03);\r\n}\r\n.curso-card .card-body {\r\n padding: 1.25rem;\r\n display: flex;\r\n flex-direction: column;\r\n flex-grow: 1;\r\n}\r\n.curso-card .card-title {\r\n font-weight: bold;\r\n font-size: 1.25rem;\r\n margin-bottom: 0.75rem;\r\n color: #222;\r\n line-height: 1.3;\r\n}\r\n.curso-card .card-meta {\r\n font-size: 0.85rem;\r\n color: #6c757d;\r\n margin-bottom: 0.5rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.4rem;\r\n font-weight: normal;\r\n}\r\n.curso-card .card-meta i {\r\n color: var(--usac-blue-medium);\r\n}\r\n.curso-card .card-text-description {\r\n font-size: 0.95rem;\r\n color: #555;\r\n margin-bottom: 1rem;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n font-weight: normal;\r\n}\r\n.curso-card .card-buttons {\r\n margin-top: auto;\r\n padding-top: 1rem;\r\n border-top: 1px solid #eee;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.75rem;\r\n}\r\n@media (min-width: 768px) {\r\n .curso-card .card-buttons {\r\n flex-direction: row;\r\n justify-content: center;\r\n }\r\n}\r\n.curso-card .card-buttons .btn {\r\n font-size: 0.95rem;\r\n padding: 0.7rem 1.2rem;\r\n border-radius: 0.5rem;\r\n width: 100%;\r\n text-align: center;\r\n min-width: 120px;\r\n \/* Ya no necesitamos font-weight: normal; aqu\u00ed, la especificidad lo maneja. *\/\r\n transition: all 0.2s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n}\r\n@media (min-width: 768px) {\r\n .curso-card .card-buttons .btn {\r\n width: auto;\r\n }\r\n}\r\n\r\n\/* ESTILOS PARA SECCI\u00d3N DE MICROCREDENCIALES *\/\r\n.microcredencial-content-box {\r\n border: 1px solid #ddd;\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n box-shadow: 0 6px 12px rgba(0,0,0,0.1);\r\n background-color: #fff;\r\n margin-top: 1.5rem;\r\n margin-bottom: 2.5rem;\r\n}\r\n.microcredencial-content-box h4 {\r\n color: var(--usac-blue-dark);\r\n font-weight: bold;\r\n margin-bottom: 1.25rem;\r\n border-bottom: 2px solid var(--usac-blue-medium);\r\n padding-bottom: 0.5rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n}\r\n.microcredencial-content-box ul {\r\n list-style-type: disc;\r\n margin-left: 1.5rem;\r\n margin-bottom: 1.5rem;\r\n}\r\n.microcredencial-content-box ul li {\r\n margin-bottom: 0.6rem;\r\n line-height: 1.6;\r\n font-weight: normal;\r\n}\r\n.microcredencial-icon {\r\n display: block;\r\n margin: 2rem auto 1rem auto;\r\n max-width: 150px;\r\n height: auto;\r\n filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));\r\n}\r\n\r\n\/* --- Estilos para Bloques de Contenido Din\u00e1mico (Cursos) --- *\/\r\n.course-segment {\r\n border: 1px solid #e0e0e0;\r\n border-radius: 1rem;\r\n padding: 2rem;\r\n margin-bottom: 3rem;\r\n background-color: #ffffff;\r\n box-shadow: 0 4px 10px rgba(0,0,0,0.08);\r\n}\r\n.course-segment-title {\r\n font-size: 1.8rem;\r\n color: var(--usac-blue-dark);\r\n margin-bottom: 2rem;\r\n border-bottom: 3px solid var(--usac-blue-medium);\r\n padding-bottom: 0.8rem;\r\n text-align: center;\r\n font-weight: bold;\r\n}\r\n.course-segment .row {\r\n margin-top: 2rem;\r\n}\r\n\r\n\/* Estilos para el mensaje de \"no hay contenido\" *\/\r\n.empty-message {\r\n text-align: center;\r\n padding: 3rem 0;\r\n color: #6c757d;\r\n font-size: 1.15rem;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 1rem;\r\n font-weight: normal;\r\n}\r\n.empty-message i {\r\n font-size: 3rem;\r\n color: #ced4da;\r\n}\r\n\r\n\/* Estilos para el footer *\/\r\nfooter {\r\n background-color: #212529;\r\n padding: 1.5rem 0;\r\n font-size: 0.9rem;\r\n color: #adb5bd;\r\n font-weight: normal;\r\n}\r\n\r\n\/* Nuevos estilos para los bloques \"Disponibles\" y \"A solicitud\" *\/\r\n.course-type-block {\r\n margin-top: 2.5rem;\r\n margin-bottom: 2.5rem;\r\n padding: 1.5rem;\r\n border: 1px solid #e9ecef;\r\n border-radius: 0.75rem;\r\n background-color: #f8f9fa;\r\n box-shadow: 0 2px 8px rgba(0,0,0,0.05);\r\n}\r\n.course-type-block h4 {\r\n font-size: 1.5rem;\r\n color: var(--usac-blue-dark);\r\n margin-bottom: 1.5rem;\r\n border-bottom: 2px solid var(--usac-blue-light);\r\n padding-bottom: 0.5rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n font-weight: bold;\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<header class=\"hero-section\">\r\n <div class=\"container header-content\">\r\n <h1 class=\"header-title\">Formaci\u00f3n Tecnopedag\u00f3gica<\/h1>\r\n <p class=\"lead\">Desarrolla habilidades digitales en educaci\u00f3n virtual con cursos, diplomados, talleres y conferencias dise\u00f1ados para ti. \u00a1Impulsa tu carrera y transforma el aprendizaje!<\/p>\r\n <\/div>\r\n<\/header>\r\n\r\n<div class=\"container text-center my-5\">\r\n <h2 class=\"section-title\">Explora nuestras \u00e1reas de formaci\u00f3n <\/h2>\r\n <p class=\"text-muted\">Explora nuestras areas de f:<\/p>\r\n <div class=\"d-flex justify-content-center flex-wrap gap-3 main-nav-buttons\">\r\n <button class=\"btn btn-outline-primary\" data-section=\"micro\" aria-label=\"Explorar formaci\u00f3n microcredencial\"><i class=\"fa-solid fa-award\"><\/i> Microcredenciales<\/button>\r\n <button class=\"btn btn-outline-primary\" data-section=\"cursos\" aria-label=\"Explorar cursos\"><i class=\"fas fa-graduation-cap\"><\/i> Cursos<\/button>\r\n <button class=\"btn btn-outline-primary\" data-section=\"diplomados\" aria-label=\"Explorar diplomados\"><i class=\"fa-solid fa-user-graduate\"><\/i> Diplomados<\/button>\r\n <button class=\"btn btn-outline-primary\" data-section=\"talleres\" aria-label=\"Explorar talleres\"><i class=\"fas fa-tools\"><\/i> Talleres<\/button>\r\n <button class=\"btn btn-outline-primary\" data-section=\"conferencias\" aria-label=\"Explorar conferencias\"><i class=\"fas fa-chalkboard-teacher\"><\/i> Conferencias<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<div id=\"seccion-micro\" class=\"container py-4 hidden\">\r\n <h3 class=\"section-title\"><i class=\"fa-solid fa-award me-2\"><\/i> Formaci\u00f3n con Microcredenciales<\/h3>\r\n <div class=\"microcredencial-content-box text-start\">\r\n <h4><i class=\"fas fa-info-circle\"><\/i> \u00bfQu\u00e9 son las Microcredenciales?<\/h4>\r\n <p>\r\n Descubre el futuro de la educaci\u00f3n con nuestras **Microcredenciales Digitales Universitarias**, un programa innovador creado bajo el Acuerdo de Rector\u00eda N.\u00b0 0045-2025. Estas certificaciones reconocen el dominio de habilidades espec\u00edficas, impulsando tu desarrollo profesional y la calidad educativa en la USAC.\r\n <\/p>\r\n <p>\r\n Una microcredencial es una certificaci\u00f3n que reconoce el dominio de una habilidad o conjunto de habilidades adquiridas a trav\u00e9s de programas cortos de formaci\u00f3n o actualizaci\u00f3n, dise\u00f1ados para promover aprendizajes formales que fortalezcan la Pol\u00edtica de Calidad Educativa y la Pol\u00edtica de Educaci\u00f3n a Distancia en Entornos Virtuales de la USAC.\r\n <\/p>\r\n\r\n <h4><i class=\"fas fa-check-circle\"><\/i> C\u00f3mo Obtenerlas:<\/h4>\r\n <p>\r\n Las microcredenciales podr\u00e1n obtenerse mediante formaciones **presenciales, virtuales o mixtas**, asegurando el acceso para toda la comunidad universitaria. Todas nuestras ofertas acad\u00e9micas que otorgan una microcredencial o forman parte de una ruta de aprendizaje para obtenerla estar\u00e1n identificadas con la siguiente imagen.\r\n <\/p>\r\n\r\n <h4><i class=\"fas fa-shield-alt\"><\/i> Validaci\u00f3n y Emisi\u00f3n:<\/h4>\r\n <p>\r\n La validaci\u00f3n y emisi\u00f3n de estas microcredenciales ser\u00e1 coordinada por la DIGED, a trav\u00e9s de la Divisi\u00f3n de Educaci\u00f3n a Distancia en Entornos Virtuales (DEDEV) y la Divisi\u00f3n de Evaluaci\u00f3n y Acreditaci\u00f3n Institucional (DEAI). Estas certificaciones digitales contar\u00e1n con **tecnolog\u00eda blockchain**, que garantiza su autenticidad y respaldo, validando que quien la recibe ha adquirido efectivamente el aprendizaje o habilidad correspondiente.\r\n <\/p>\r\n <div class=\"text-center\">\r\n <img decoding=\"async\" src=\"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2025\/05\/Microcredenciales-Icono-150x150.png\" alt=\"\u00cdcono de Microcredencial Digital\" class=\"microcredencial-icon\" \/>\r\n <p class=\"small text-muted mt-2\">Identifica las formaciones con este sello.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div id=\"seccion-cursos\" class=\"container py-4 hidden\">\r\n <h3 class=\"section-title\"><i class=\"fas fa-book-open me-2\"><\/i> Explora Nuestros Cursos<\/h3>\r\n <div class=\"filters text-center mb-5\" id=\"course-filters\">\r\n <button class=\"btn btn-secondary filter-btn\" data-filter=\"Todo\"><i class=\"fas fa-globe me-2\"><\/i>Todo<\/button>\r\n <button class=\"btn btn-secondary filter-btn\" data-filter=\"Microcredencial\"><i class=\"fas fa-award me-2\"><\/i>Microcredencial<\/button>\r\n <button class=\"btn btn-secondary filter-btn\" data-filter=\"IA\"><i class=\"fas fa-robot me-2\"><\/i>IA<\/button>\r\n <button class=\"btn btn-secondary filter-btn\" data-filter=\"Productividad\"><i class=\"fas fa-briefcase me-2\"><\/i>Productividad<\/button>\r\n <button class=\"btn btn-secondary filter-btn\" data-filter=\"Ofim\u00e1tica\"><i class=\"fas fa-file-alt me-2\"><\/i>Ofim\u00e1tica<\/button>\r\n <\/div>\r\n <div id=\"cursos-container\">\r\n <\/div>\r\n<\/div>\r\n\r\n<div id=\"seccion-diplomados\" class=\"container py-4 hidden\">\r\n <h3 class=\"section-title\"><i class=\"fa-solid fa-user-graduate me-2\"><\/i> Diplomados<\/h3>\r\n<\/div>\r\n\r\n<div id=\"seccion-talleres\" class=\"container py-4 hidden\">\r\n <h3 class=\"section-title\"><i class=\"fas fa-tools me-2\"><\/i> Talleres<\/h3>\r\n<\/div>\r\n\r\n<div id=\"seccion-conferencias\" class=\"container py-4 hidden\">\r\n <h3 class=\"section-title\"><i class=\"fas fa-chalkboard-teacher me-2\"><\/i> Conferencias<\/h3>\r\n<\/div>\r\n\r\n<footer class=\"bg-dark text-white text-center py-3 mt-5\">\r\n <p class=\"mb-0\">© 2025 USAC - Educaci\u00f3n Virtual. Todos los derechos reservados.<\/p>\r\n<\/footer>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz\" crossorigin=\"anonymous\"><\/script>\r\n\r\n<script>\r\n \/\/ Datos de los cursos\r\n const coursesData = [\r\n {\r\n title: \"Moodle Intermedio para profesores\",\r\n image: \"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2025\/05\/Diseno-de-identificacion-CURSO-MOODLE-INTERMEDIO-2025-N-1-1024x769.jpg\",\r\n shortDescription: \"Profundiza en el uso de Moodle para crear entornos de aprendizaje interactivos y gestionar actividades complejas.\",\r\n category: \"Moodle\",\r\n isMicrocredentialRoute: true,\r\n microcredentialRouteName: \"Moodle Avanzado\",\r\n type: \"disponible\",\r\n duration: \"40 horas\",\r\n level: \"Intermedio\",\r\n learnMoreLink: \"#\",\r\n courseLink: \"#\"\r\n },\r\n {\r\n title: \"Dise\u00f1a cursos: Moodle en acci\u00f3n\",\r\n image: \"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2025\/04\/Diseno-de-identificacion-CURSO-DISENA-CURSOS-EN-MOODLE-2025-N-1024x769.jpg\",\r\n shortDescription: \"Aprende a estructurar, dise\u00f1ar y subir contenido de cursos de manera efectiva en la plataforma Moodle.\",\r\n category: \"Moodle\",\r\n isMicrocredentialRoute: true,\r\n microcredentialRouteName: \"Moodle Avanzado\",\r\n type: \"disponible\",\r\n duration: \"60 horas\",\r\n level: \"Intermedio\",\r\n learnMoreLink: \"#\",\r\n courseLink: \"#\"\r\n },\r\n {\r\n title: \"Curso de Tecnoaccesibilidad\",\r\n image: \"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2025\/03\/Diseno-de-identificacion-CURSO-DE-ACCESIBILIDAD-2025-N-1024x769.jpg\",\r\n shortDescription: \"Comprende los principios y herramientas para crear contenido digital accesible para todos los estudiantes.\",\r\n category: \"Accesibilidad\",\r\n isMicrocredentialRoute: true,\r\n microcredentialRouteName: \"Educaci\u00f3n Inclusiva Digital\",\r\n type: \"disponible\",\r\n duration: \"30 horas\",\r\n level: \"B\u00e1sico-Intermedio\",\r\n learnMoreLink: \"#\",\r\n courseLink: \"#\"\r\n },\r\n {\r\n title: \"Google Sheet para Docentes\",\r\n image: \"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2025\/02\/Diseno-de-identificacion-GOOGLE-SHEET-2025-N1r-768x576.jpg\",\r\n shortDescription: \"Domina Google Sheets para organizar datos, realizar c\u00e1lculos y gestionar informaci\u00f3n acad\u00e9mica de forma eficiente.\",\r\n category: \"Ofim\u00e1tica\",\r\n isMicrocredentialRoute: false,\r\n type: \"disponible\",\r\n duration: \"40 horas\",\r\n level: \"B\u00e1sico\",\r\n learnMoreLink: \"#\",\r\n courseLink: \"#\"\r\n },\r\n {\r\n title: \"Foros Moodle: Interacci\u00f3n efectiva\",\r\n image: \"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2025\/03\/Diseno-de-identificacion-Foros-Moodle-2025-N-768x577.jpg\",\r\n shortDescription: \"Optimiza el uso de foros en Moodle para fomentar la participaci\u00f3n y el debate constructivo entre estudiantes.\",\r\n category: \"Moodle\",\r\n isMicrocredentialRoute: true,\r\n microcredentialRouteName: \"Moodle Avanzado\",\r\n type: \"solicitud\",\r\n duration: \"20 horas\",\r\n level: \"Intermedio\",\r\n learnMoreLink: \"#\",\r\n requestLink: \"#\"\r\n },\r\n {\r\n title: \"Discapacidad y educaci\u00f3n inclusiva\",\r\n image: \"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2025\/01\/Diseno-de-identificacion-Discapacidad-2025-N-768x576.jpg\",\r\n shortDescription: \"Explora las estrategias pedag\u00f3gicas para integrar a estudiantes con discapacidad en entornos educativos virtuales.\",\r\n category: \"Accesibilidad\",\r\n isMicrocredentialRoute: true,\r\n microcredentialRouteName: \"Educaci\u00f3n Inclusiva Digital\",\r\n type: \"solicitud\",\r\n duration: \"40 horas\",\r\n level: \"B\u00e1sico\",\r\n learnMoreLink: \"#\",\r\n requestLink: \"#\"\r\n },\r\n {\r\n title: \"Accesibilidad para entornos virtuales\",\r\n image: \"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2025\/01\/Diseno-de-identificacion-Accesibilidad-2025-N-768x576.jpg\",\r\n shortDescription: \"Dise\u00f1a materiales y actividades virtuales que sean accesibles para todos, cumpliendo con est\u00e1ndares de inclusi\u00f3n.\",\r\n category: \"Accesibilidad\",\r\n isMicrocredentialRoute: true,\r\n microcredentialRouteName: \"Educaci\u00f3n Inclusiva Digital\",\r\n type: \"solicitud\",\r\n duration: \"40 horas\",\r\n level: \"Intermedio\",\r\n learnMoreLink: \"#\",\r\n requestLink: \"#\"\r\n },\r\n {\r\n title: \"Google Drive para Moodle y web\",\r\n image: \"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2023\/10\/Diseno-de-identificacion-GOOGLE-DRIVE-para-Moodle-y-pagina-web-768x576.jpg\",\r\n shortDescription: \"Aprovecha Google Drive para almacenar y compartir recursos educativos de forma eficiente en Moodle y web.\",\r\n category: \"Productividad\",\r\n isMicrocredentialRoute: false,\r\n type: \"solicitud\",\r\n duration: \"6 horas\",\r\n level: \"B\u00e1sico\",\r\n learnMoreLink: \"#\",\r\n requestLink: \"#\"\r\n },\r\n {\r\n title: \"Calendar Workspace para Moodle y web\",\r\n image: \"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2023\/08\/Diseno-de-identificacion-CALENDAR-WORKSPACE-para-Moodle-y-pagina-web-768x576.jpg\",\r\n shortDescription: \"Organiza tus actividades acad\u00e9micas y colabora con tu equipo usando Google Calendar integrado en Moodle.\",\r\n category: \"Productividad\",\r\n isMicrocredentialRoute: false,\r\n type: \"solicitud\",\r\n duration: \"6 horas\",\r\n level: \"B\u00e1sico\",\r\n learnMoreLink: \"#\",\r\n requestLink: \"#\"\r\n },\r\n {\r\n title: \"Fundamentos de Word\",\r\n image: \"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2023\/08\/Diseno-de-identificacion-FUNDAMENTOS-DE-WORD-para-Moodle-y-pagina-web-768x576.jpg\",\r\n shortDescription: \"Aprende las bases de Microsoft Word para la creaci\u00f3n y edici\u00f3n de documentos acad\u00e9micos y profesionales.\",\r\n category: \"Ofim\u00e1tica\",\r\n isMicrocredentialRoute: false,\r\n type: \"solicitud\",\r\n duration: \"6 horas\",\r\n level: \"B\u00e1sico\",\r\n learnMoreLink: \"#\",\r\n requestLink: \"#\"\r\n },\r\n {\r\n title: \"Mejore Dominio de Word\",\r\n image: \"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2024\/04\/Diseno-de-identificacion-MEJORE-DOMINIO-DE-WORD-2024.jpg\",\r\n shortDescription: \"Perfecciona tus habilidades en Word con funciones avanzadas para documentos complejos y formatos especiales.\",\r\n category: \"Ofim\u00e1tica\",\r\n isMicrocredentialRoute: false,\r\n type: \"solicitud\",\r\n duration: \"10 horas\",\r\n level: \"Intermedio\",\r\n learnMoreLink: \"#\",\r\n requestLink: \"#\"\r\n },\r\n {\r\n title: \"Word Profesional\",\r\n image: \"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2024\/02\/DISENO-DE-IDENTIFICACION-WORD-PROFESIONAL-WEB_Mesa-de-trabajo-1-768x576.jpg\",\r\n shortDescription: \"Aprende a crear documentos de alta calidad, informes y publicaciones con las herramientas profesionales de Word.\",\r\n category: \"Ofim\u00e1tica\",\r\n isMicrocredentialRoute: false,\r\n type: \"solicitud\",\r\n duration: \"10 horas\",\r\n level: \"Avanzado\",\r\n learnMoreLink: \"#\",\r\n requestLink: \"#\"\r\n },\r\n {\r\n title: \"Docs de Google\",\r\n image: \"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2024\/07\/Diseno-de-identificacion-DOCS-DE-GOOGLE-2024-768x577.jpg\",\r\n shortDescription: \"Colabora en tiempo real y crea documentos en l\u00ednea con Google Docs, ideal para proyectos grupales.\",\r\n category: \"Ofim\u00e1tica\",\r\n isMicrocredentialRoute: false,\r\n type: \"solicitud\",\r\n duration: \"10 horas\",\r\n level: \"B\u00e1sico\",\r\n learnMoreLink: \"#\",\r\n requestLink: \"#\"\r\n },\r\n {\r\n title: \"ChatGPT y otras IA para la educaci\u00f3n\",\r\n image: \"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2024\/09\/Diseno-de-identificacion-CHAT-GPT-2024-N-768x576.jpg\",\r\n shortDescription: \"Descubre c\u00f3mo integrar herramientas de Inteligencia Artificial como ChatGPT en tus pr\u00e1cticas docentes.\",\r\n category: \"IA\",\r\n isMicrocredentialRoute: false,\r\n type: \"solicitud\",\r\n duration: \"30 horas\",\r\n level: \"B\u00e1sico\",\r\n learnMoreLink: \"#\",\r\n requestLink: \"#\"\r\n },\r\n {\r\n title: \"PowerPoint Evolucionado\",\r\n image: \"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2024\/08\/Diseno-de-identificacion-POWER-POINT-EVOLUCIONADO-2024-N-1-768x576.jpg\",\r\n shortDescription: \"Crea presentaciones din\u00e1micas y profesionales con t\u00e9cnicas avanzadas de PowerPoint y dise\u00f1o visual.\",\r\n category: \"Ofim\u00e1tica\",\r\n isMicrocredentialRoute: false,\r\n type: \"solicitud\",\r\n duration: \"15 horas\",\r\n level: \"Intermedio\",\r\n learnMoreLink: \"#\",\r\n requestLink: \"#\"\r\n }\r\n ];\r\n\r\n \/\/ Referencias a elementos del DOM\r\n const mainNavButtons = document.querySelectorAll('.main-nav-buttons .btn');\r\n const courseFilters = document.getElementById('course-filters');\r\n const cursosContainer = document.getElementById('cursos-container');\r\n\r\n \/\/ Funci\u00f3n para ocultar todas las secciones de contenido principal\r\n const hideAllSections = () => {\r\n document.querySelectorAll('[id^=\"seccion-\"]').forEach(sec => sec.classList.add('hidden'));\r\n document.querySelectorAll('.empty-message').forEach(msg => msg.remove());\r\n };\r\n\r\n \/\/ Funci\u00f3n para generar el HTML de un mensaje vac\u00edo\r\n const getEmptyMessageHtml = (iconClass, message) => `\r\n <div class=\"empty-message\">\r\n <i class=\"${iconClass}\"><\/i>\r\n <p>${message}<\/p>\r\n <\/div>\r\n `;\r\n\r\n \/\/ Funci\u00f3n para mostrar una secci\u00f3n espec\u00edfica\r\n const showSection = (sectionName) => {\r\n hideAllSections();\r\n\r\n mainNavButtons.forEach(button => {\r\n button.classList.remove('active-section');\r\n });\r\n\r\n const section = document.getElementById(`seccion-${sectionName}`);\r\n if (section) {\r\n section.classList.remove('hidden');\r\n const clickedButton = document.querySelector(`.main-nav-buttons .btn[data-section=\"${sectionName}\"]`);\r\n if (clickedButton) {\r\n clickedButton.classList.add('active-section');\r\n }\r\n\r\n if (sectionName === 'cursos') {\r\n updateFilterCounts();\r\n const todoButton = document.querySelector('#course-filters .filter-btn[data-filter=\"Todo\"]');\r\n if (todoButton) {\r\n filterCourses('Todo', todoButton);\r\n }\r\n } else {\r\n \/\/ Mostrar mensaje de contenido no disponible si la secci\u00f3n est\u00e1 vac\u00eda\r\n if (!section.querySelector('.microcredencial-content-box') && !section.querySelector('.course-segment')) {\r\n let messageHtml = '';\r\n switch (sectionName) {\r\n case 'diplomados':\r\n messageHtml = getEmptyMessageHtml('far fa-folder-open', 'A\u00fan estamos desarrollando **Diplomados** emocionantes para ti. \u00a1Vuelve pronto para descubrirlos!');\r\n break;\r\n case 'talleres':\r\n messageHtml = getEmptyMessageHtml('fas fa-hammer', 'Nuestros **Talleres** est\u00e1n en preparaci\u00f3n. \u00a1Pronto tendremos opciones pr\u00e1cticas para impulsar tus habilidades!');\r\n break;\r\n case 'conferencias':\r\n messageHtml = getEmptyMessageHtml('fas fa-bullhorn', 'Prepara tus notas, \u00a1pronto anunciaremos nuestras pr\u00f3ximas **Conferencias** con expertos en la materia!');\r\n break;\r\n }\r\n section.insertAdjacentHTML('beforeend', messageHtml);\r\n }\r\n }\r\n }\r\n };\r\n\r\n \/\/ Funci\u00f3n para renderizar una \u00fanica tarjeta de curso\r\n const renderCourseCard = (course) => {\r\n const imageUrl = course.image || 'https:\/\/via.placeholder.com\/400x300?text=Imagen+No+Disponible';\r\n const actionButton = course.type === 'disponible'\r\n ? `<a href=\"${course.courseLink}\" class=\"btn btn-ir-curso\" aria-label=\"Ir al curso ${course.title}\"><i class=\"fas fa-play-circle me-1\"><\/i> Ir al curso<\/a>`\r\n : `<a href=\"${course.requestLink}\" class=\"btn btn-solicitar\" aria-label=\"Solicitar el curso ${course.title}\"><i class=\"fas fa-paper-plane me-1\"><\/i> Solicitar<\/a>`;\r\n\r\n \/\/ Incluye el t\u00edtulo del curso directamente en la tarjeta, como se muestra en la imagen\r\n return `\r\n <div class=\"col-12 col-sm-6 col-md-6 col-lg-4 mb-4 curso-card\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-img-container\">\r\n <img decoding=\"async\" src=\"${imageUrl}\" class=\"card-img-top\" alt=\"${course.title}\" loading=\"lazy\" onerror=\"this.onerror=null;this.src='https:\/\/via.placeholder.com\/400x300?text=Imagen+No+Disponible';\" \/>\r\n <\/div>\r\n <div class=\"card-body\">\r\n ${course.isMicrocredentialRoute ? `<p class=\"card-meta\"><i class=\"fas fa-certificate me-1\"><\/i> <small class=\"text-muted\">Ruta: ${course.microcredentialRouteName}<\/small><\/p>` : ''}\r\n ${course.shortDescription ? `<p class=\"card-text-description\">${course.shortDescription}<\/p>` : ''}\r\n <ul class=\"list-unstyled small text-muted mt-2 mb-3\">\r\n ${course.duration ? `<li class=\"card-meta\"><i class=\"far fa-clock me-1\"><\/i> ${course.duration}<\/li>` : ''}\r\n ${course.level ? `<li class=\"card-meta\"><i class=\"fas fa-signal me-1\"><\/i> Nivel: ${course.level}<\/li>` : ''}\r\n <\/ul>\r\n <div class=\"card-buttons\">\r\n <a href=\"${course.learnMoreLink}\" class=\"btn btn-saber-mas\" aria-label=\"Saber m\u00e1s sobre ${course.title}\"><i class=\"fas fa-info-circle me-1\"><\/i> Saber m\u00e1s<\/a>\r\n ${actionButton}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n };\r\n\r\n \/\/ Funci\u00f3n para actualizar el conteo de cursos en cada bot\u00f3n de filtro\r\n const updateFilterCounts = () => {\r\n document.querySelectorAll('#course-filters .filter-btn').forEach(btn => {\r\n const filterCategory = btn.dataset.filter;\r\n let count = 0;\r\n\r\n if (filterCategory === 'Todo') {\r\n count = coursesData.length;\r\n } else if (filterCategory === 'Microcredencial') {\r\n count = coursesData.filter(c => c.isMicrocredentialRoute).length;\r\n } else {\r\n count = coursesData.filter(c => c.category === filterCategory).length;\r\n }\r\n\r\n const originalIcon = btn.querySelector('i') ? btn.querySelector('i').outerHTML : '';\r\n btn.innerHTML = `${originalIcon} ${filterCategory} <span class=\"badge text-bg-secondary\">${count}<\/span>`;\r\n btn.setAttribute('aria-label', `Mostrar ${count} cursos de ${filterCategory}`);\r\n });\r\n };\r\n\r\n \/\/ Funci\u00f3n para filtrar y renderizar los cursos\r\n const filterCourses = (category, clickedButton) => {\r\n cursosContainer.innerHTML = ''; \/\/ Limpia el contenido existente\r\n\r\n \/\/ Actualiza el estado activo de los botones de filtro\r\n document.querySelectorAll('#course-filters .filter-btn').forEach(button => {\r\n button.classList.remove('active');\r\n button.disabled = false;\r\n });\r\n if (clickedButton) {\r\n clickedButton.classList.add('active');\r\n clickedButton.disabled = true;\r\n }\r\n\r\n let coursesToFilter = [];\r\n\r\n \/\/ L\u00f3gica para el filtro \"Microcredencial\" que agrupa por rutas\r\n if (category === 'Microcredencial') {\r\n const microcredentialRoutes = {};\r\n coursesData.forEach(course => {\r\n if (course.isMicrocredentialRoute) {\r\n if (!microcredentialRoutes[course.microcredentialRouteName]) {\r\n microcredentialRoutes[course.microcredentialRouteName] = [];\r\n }\r\n microcredentialRoutes[course.microcredentialRouteName].push(course);\r\n }\r\n });\r\n\r\n if (Object.keys(microcredentialRoutes).length > 0) {\r\n for (const routeName in microcredentialRoutes) {\r\n const routeCourses = microcredentialRoutes[routeName];\r\n const segmentTitle = document.createElement('h4');\r\n segmentTitle.classList.add('subsection-title');\r\n segmentTitle.innerHTML = `<i class=\"fas fa-award\"><\/i> Ruta: ${routeName}`;\r\n cursosContainer.appendChild(segmentTitle);\r\n\r\n const rowDiv = document.createElement('div');\r\n rowDiv.classList.add('row', 'mb-4');\r\n routeCourses.forEach(course => {\r\n rowDiv.insertAdjacentHTML('beforeend', renderCourseCard(course));\r\n });\r\n cursosContainer.appendChild(rowDiv);\r\n }\r\n } else {\r\n cursosContainer.innerHTML = getEmptyMessageHtml('fas fa-search-minus', 'No hay rutas de microcredenciales disponibles por el momento.');\r\n }\r\n return; \/\/ Salir, ya que la l\u00f3gica de agrupaci\u00f3n es diferente\r\n }\r\n\r\n \/\/ Para todos los dem\u00e1s filtros (Todo, IA, Productividad, Ofim\u00e1tica)\r\n if (category === 'Todo') {\r\n coursesToFilter = coursesData;\r\n } else {\r\n coursesToFilter = coursesData.filter(c => c.category === category);\r\n }\r\n\r\n const disponiblesCourses = coursesToFilter.filter(c => c.type === 'disponible');\r\n const solicitudCourses = coursesToFilter.filter(c => c.type === 'solicitud');\r\n\r\n \/\/ Renderizar cursos Disponibles\r\n const availableBlock = document.createElement('div');\r\n availableBlock.classList.add('course-type-block');\r\n availableBlock.innerHTML = `<h4><i class=\"fas fa-check-circle me-2\"><\/i> Disponibles<\/h4>\r\n <p>Aqu\u00ed encontrar\u00e1s cursos que se ofrecen bajo demanda o en fechas espec\u00edficas seg\u00fan la disponibilidad.<\/p>`;\r\n const availableRow = document.createElement('div');\r\n availableRow.classList.add('row');\r\n if (disponiblesCourses.length > 0) {\r\n disponiblesCourses.forEach(course => {\r\n availableRow.insertAdjacentHTML('beforeend', renderCourseCard(course));\r\n });\r\n } else {\r\n availableBlock.classList.add('hidden');\r\n \/\/ El mensaje de \"No hay cursos disponibles\" se omite aqu\u00ed porque el bloque completo se ocultar\u00e1.\r\n }\r\n availableBlock.appendChild(availableRow);\r\n cursosContainer.appendChild(availableBlock);\r\n\r\n \/\/ Renderizar cursos A solicitud\r\n const requestBlock = document.createElement('div');\r\n requestBlock.classList.add('course-type-block');\r\n requestBlock.innerHTML = `<h4><i class=\"fas fa-hourglass-half me-2\"><\/i> A solicitud<\/h4>\r\n <p class=\"block-description\">Estos cursos se abren cuando se alcanza un n\u00famero m\u00ednimo de inscritos, o est\u00e1n programados para fechas futuras que se anunciar\u00e1n.<\/p>`;\r\n const requestRow = document.createElement('div');\r\n requestRow.classList.add('row');\r\n if (solicitudCourses.length > 0) {\r\n solicitudCourses.forEach(course => {\r\n requestRow.insertAdjacentHTML('beforeend', renderCourseCard(course));\r\n });\r\n } else {\r\n \/\/ Si no hay cursos a solicitud, a\u00f1ade la clase 'hidden' al 'requestBlock' para ocultar solo ESTA secci\u00f3n.\r\n requestBlock.classList.add('hidden');\r\n \/\/ El mensaje de \"No hay cursos a solicitud\" se omite aqu\u00ed.\r\n }\r\n requestBlock.appendChild(requestRow);\r\n cursosContainer.appendChild(requestBlock);\r\n\r\n \/\/ Si ambos bloques est\u00e1n vac\u00edos (es decir, no hay cursos de ning\u00fan tipo en la categor\u00eda)\r\n if (disponiblesCourses.length === 0 && solicitudCourses.length === 0) {\r\n cursosContainer.innerHTML = getEmptyMessageHtml('fas fa-search-minus', 'No hay cursos disponibles en esta categor\u00eda por el momento.');\r\n }\r\n };\r\n\r\n\r\n \/\/ Asigna los eventos a los botones de navegaci\u00f3n principal\r\n mainNavButtons.forEach(button => {\r\n button.addEventListener('click', (event) => {\r\n showSection(event.currentTarget.dataset.section);\r\n });\r\n });\r\n\r\n \/\/ Asigna los eventos a los botones de filtro de cursos\r\n courseFilters.querySelectorAll('.filter-btn').forEach(button => {\r\n button.addEventListener('click', (event) => {\r\n filterCourses(event.currentTarget.dataset.filter, event.currentTarget);\r\n });\r\n });\r\n\r\n \/\/ Mostrar la secci\u00f3n de microcredenciales por defecto al cargar la p\u00e1gina\r\n document.addEventListener('DOMContentLoaded', () => {\r\n showSection('micro');\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Formaci\u00f3n Tecnopedag\u00f3gica – USAC Formaci\u00f3n Tecnopedag\u00f3gica Desarrolla habilidades digitales en educaci\u00f3n virtual con cursos, diplomados, talleres y conferencias dise\u00f1ados para ti. \u00a1Impulsa tu carrera y transforma el aprendizaje! Explora nuestras \u00e1reas de formaci\u00f3n Explora nuestras areas de f: Microcredenciales Cursos Diplomados Talleres Conferencias Formaci\u00f3n con Microcredenciales \u00bfQu\u00e9 son las Microcredenciales? Descubre el futuro de la …<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/\"> <span class=\"screen-reader-text\">Formacion-tecnopedagogica2025<\/span> Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-19144","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Formacion-tecnopedagogica2025<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Formacion-tecnopedagogica2025\" \/>\n<meta property=\"og:url\" content=\"https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/dedevusac\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-06T16:25:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2025\/05\/Microcredenciales-Icono-150x150.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@usacdedev\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/\",\"url\":\"https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/\",\"name\":\"Formacion-tecnopedagogica2025\",\"isPartOf\":{\"@id\":\"https:\/\/virtual.usac.edu.gt\/dedev\/#website\"},\"datePublished\":\"2025-06-05T17:45:49+00:00\",\"dateModified\":\"2025-06-06T16:25:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/virtual.usac.edu.gt\/dedev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Formacion-tecnopedagogica2025\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/virtual.usac.edu.gt\/dedev\/#website\",\"url\":\"https:\/\/virtual.usac.edu.gt\/dedev\/\",\"name\":\"https:\/\/virtual.usac.edu.gt\/dedev\",\"description\":\"Divisi\u00f3n de Educaci\u00f3n a Distancia en Entornos Virtuales\",\"publisher\":{\"@id\":\"https:\/\/virtual.usac.edu.gt\/dedev\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/virtual.usac.edu.gt\/dedev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/virtual.usac.edu.gt\/dedev\/#organization\",\"name\":\"DEDEV USAC\",\"alternateName\":\"DEDEV\",\"url\":\"https:\/\/virtual.usac.edu.gt\/dedev\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/virtual.usac.edu.gt\/dedev\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2021\/11\/cropped-ICONO_Mesa-de-trabajo-1-copia.png\",\"contentUrl\":\"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2021\/11\/cropped-ICONO_Mesa-de-trabajo-1-copia.png\",\"width\":512,\"height\":512,\"caption\":\"DEDEV USAC\"},\"image\":{\"@id\":\"https:\/\/virtual.usac.edu.gt\/dedev\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/dedevusac\",\"https:\/\/twitter.com\/usacdedev\",\"https:\/\/www.youtube.com\/channel\/UC0weNIBRspBx-ntSC31LgVA\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Formacion-tecnopedagogica2025","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/","og_locale":"es_ES","og_type":"article","og_title":"Formacion-tecnopedagogica2025","og_url":"https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/","article_publisher":"https:\/\/www.facebook.com\/dedevusac","article_modified_time":"2025-06-06T16:25:24+00:00","og_image":[{"url":"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2025\/05\/Microcredenciales-Icono-150x150.png"}],"twitter_card":"summary_large_image","twitter_site":"@usacdedev","twitter_misc":{"Est. reading time":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/","url":"https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/","name":"Formacion-tecnopedagogica2025","isPartOf":{"@id":"https:\/\/virtual.usac.edu.gt\/dedev\/#website"},"datePublished":"2025-06-05T17:45:49+00:00","dateModified":"2025-06-06T16:25:24+00:00","breadcrumb":{"@id":"https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/virtual.usac.edu.gt\/dedev\/formacion-tecnopedagogica2025\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/virtual.usac.edu.gt\/dedev\/"},{"@type":"ListItem","position":2,"name":"Formacion-tecnopedagogica2025"}]},{"@type":"WebSite","@id":"https:\/\/virtual.usac.edu.gt\/dedev\/#website","url":"https:\/\/virtual.usac.edu.gt\/dedev\/","name":"https:\/\/virtual.usac.edu.gt\/dedev","description":"Divisi\u00f3n de Educaci\u00f3n a Distancia en Entornos Virtuales","publisher":{"@id":"https:\/\/virtual.usac.edu.gt\/dedev\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/virtual.usac.edu.gt\/dedev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/virtual.usac.edu.gt\/dedev\/#organization","name":"DEDEV USAC","alternateName":"DEDEV","url":"https:\/\/virtual.usac.edu.gt\/dedev\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/virtual.usac.edu.gt\/dedev\/#\/schema\/logo\/image\/","url":"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2021\/11\/cropped-ICONO_Mesa-de-trabajo-1-copia.png","contentUrl":"https:\/\/virtual.usac.edu.gt\/dedev\/wp-content\/uploads\/2021\/11\/cropped-ICONO_Mesa-de-trabajo-1-copia.png","width":512,"height":512,"caption":"DEDEV USAC"},"image":{"@id":"https:\/\/virtual.usac.edu.gt\/dedev\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/dedevusac","https:\/\/twitter.com\/usacdedev","https:\/\/www.youtube.com\/channel\/UC0weNIBRspBx-ntSC31LgVA"]}]}},"_links":{"self":[{"href":"https:\/\/virtual.usac.edu.gt\/dedev\/wp-json\/wp\/v2\/pages\/19144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/virtual.usac.edu.gt\/dedev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/virtual.usac.edu.gt\/dedev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/virtual.usac.edu.gt\/dedev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/virtual.usac.edu.gt\/dedev\/wp-json\/wp\/v2\/comments?post=19144"}],"version-history":[{"count":286,"href":"https:\/\/virtual.usac.edu.gt\/dedev\/wp-json\/wp\/v2\/pages\/19144\/revisions"}],"predecessor-version":[{"id":19435,"href":"https:\/\/virtual.usac.edu.gt\/dedev\/wp-json\/wp\/v2\/pages\/19144\/revisions\/19435"}],"wp:attachment":[{"href":"https:\/\/virtual.usac.edu.gt\/dedev\/wp-json\/wp\/v2\/media?parent=19144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}