(() => { // Evita que el widget se cargue dos veces if (window.__EMPRESABILITY_COMMUNITY_WIDGET__) return; window.__EMPRESABILITY_COMMUNITY_WIDGET__ = true; const CONFIG = { communityUrl: 'https://comunidad.empresability.org/communities/groups/movimiento-empresability/home', learningUrl: 'https://comunidad.empresability.org/communities/groups/movimiento-empresability/learning', accent: '#5B3FD6', accentDark: '#4329B8', text: '#17202A' }; // Evita mostrar el widget dentro de la propia Comunidad if (location.hostname === 'comunidad.empresability.org') return; /* ========================================================= ESTILOS ========================================================= */ const style = document.createElement('style'); style.id = 'emp-community-widget-styles'; style.textContent = ` #emp-community-widget { position: fixed; right: 20px; bottom: 20px; z-index: 2147483000; font-family: inherit; color: ${CONFIG.text}; } #emp-community-widget * { box-sizing: border-box; } /* BOTÓN FLOTANTE */ #emp-community-launcher { display: flex; align-items: center; gap: 10px; min-height: 52px; border: 0; border-radius: 999px; padding: 10px 16px; background: ${CONFIG.accent}; color: #ffffff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.18); transition: background .18s ease, transform .18s ease; } #emp-community-launcher:hover { background: ${CONFIG.accentDark}; transform: translateY(-1px); } #emp-community-launcher .emp-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); font-size: 18px; } /* PANEL */ #emp-community-panel { position: absolute; right: 0; bottom: 66px; width: min(360px, calc(100vw - 32px)); background: #ffffff; border: 1px solid rgba(23,32,42,.10); border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.22); padding: 18px; display: none; } #emp-community-panel[data-open="true"] { display: block; } .emp-community-kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: ${CONFIG.accent}; } .emp-community-title { margin: 0 32px 8px 0; font-size: 20px; line-height: 1.2; color: ${CONFIG.text}; } .emp-community-copy { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: #52606D; } /* CERRAR */ .emp-community-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #F4F6F8; color: #52606D; cursor: pointer; font-size: 20px; line-height: 1; } /* ACCESOS */ .emp-community-actions { display: grid; gap: 9px; } .emp-community-action { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 50px; padding: 11px 12px; border: 1px solid #E7E9EE; border-radius: 13px; background: #ffffff; color: ${CONFIG.text}; text-decoration: none; cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; } .emp-community-action:hover { transform: translateY(-1px); border-color: rgba(91,63,214,.36); background: #FAF9FF; } .emp-community-action strong { display: block; font-size: 14px; } .emp-community-action small { display: block; margin-top: 2px; color: #6B7785; font-size: 12px; line-height: 1.35; } .emp-action-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; background: #F3F0FF; font-size: 17px; } /* SUGERENCIA PEDAGÓGICA */ .emp-community-tip { margin-top: 12px; padding: 11px 12px; border-radius: 12px; background: #F7F8FA; font-size: 12px; line-height: 1.45; color: #52606D; } .emp-community-tip strong { color: ${CONFIG.text}; } /* BOTÓN PRINCIPAL */ .emp-community-primary { margin-top: 12px; width: 100%; min-height: 46px; border: 0; border-radius: 12px; background: ${CONFIG.accent}; color: #ffffff; font: inherit; font-weight: 800; cursor: pointer; } .emp-community-primary:hover { background: ${CONFIG.accentDark}; } /* ACCESIBILIDAD */ #emp-community-launcher:focus-visible, #emp-community-panel button:focus-visible, #emp-community-panel a:focus-visible { outline: 3px solid rgba(91,63,214,.28); outline-offset: 3px; } /* MÓVIL */ @media (max-width: 520px) { #emp-community-widget { right: 12px; bottom: 12px; } #emp-community-launcher { min-height: 50px; padding: 9px 13px; } #emp-community-panel { right: 0; bottom: 62px; } } @media (prefers-reduced-motion: reduce) { .emp-community-action, #emp-community-launcher { transition: none; } } `; document.head.appendChild(style); /* ========================================================= CONTENIDO DEL WIDGET ========================================================= */ const root = document.createElement('div'); root.id = 'emp-community-widget'; root.innerHTML = ` `; document.body.appendChild(root); /* ========================================================= INTERACCIONES ========================================================= */ const panel = root.querySelector('#emp-community-panel'); const launcher = root.querySelector('#emp-community-launcher'); const close = root.querySelector('.emp-community-close'); const primary = root.querySelector('.emp-community-primary'); const setOpen = (open) => { panel.dataset.open = String(open); launcher.setAttribute( 'aria-expanded', String(open) ); if (open) { close.focus(); } }; /* ABRIR / CERRAR */ launcher.addEventListener('click', () => { const isOpen = panel.dataset.open === 'true'; setOpen(!isOpen); }); close.addEventListener('click', () => { setOpen(false); launcher.focus(); }); /* BOTÓN PRINCIPAL */ primary.addEventListener('click', () => { window.open( CONFIG.communityUrl, '_blank', 'noopener,noreferrer' ); }); /* ESC PARA CERRAR */ document.addEventListener( 'keydown', (event) => { if ( event.key === 'Escape' && panel.dataset.open === 'true' ) { setOpen(false); launcher.focus(); } } ); /* CERRAR AL HACER CLIC FUERA */ document.addEventListener( 'click', (event) => { if ( panel.dataset.open === 'true' && !root.contains(event.target) ) { setOpen(false); } } ); })();

Courses in Comunidad Empresability