groups-advanced-system.min.js

class AdvancedGroupsSystemV3{constructor(){this.API_BASE="https://latanda.online",this.currentUser=this.loadUserData(),this.apiProxy=window.apiProxy||window.EnhancedAPIProxy||null,this.apiProxy,this.groups=[],this.tandas=this.loadTandasData(),this.matches=this.loadMatchesData(),this.notifications=this.loadNotificationsData(),this.activities=this.loadActivitiesData(),this.initializeGroups(),this.userStats=this.calculateUserStats(),this.currentTab="dashboard",this.initTheme(),this.matchingWeights={location:.3,ageGroup:.2,experience:.25,trustScore:.15,contribution:.1},this.init(),this.addComprehensiveErrorHandling()}async initializeGroups(){try{this.groups=await this.loadGroupsData(),window.addEventListener("groupCreated",a=>{this.refreshGroupsAfterCreation(a.detail)}),this.userStats=this.calculateUserStats(),document.querySelector(".main-content")&&(this.updateDashboard(),this.loadGroupsContent())}catch(a){}}async init(){try{this.setupGlobalErrorHandling(),this.setupEventListeners(),this.updateDashboard(),this.loadRecentActivity(),this.initializeFormHandlers(),this.updateNotificationCount(),this.startPeriodicUpdates()}catch(a){this.handleError(a,"Inicialización del sistema")}}loadUserData(){const a=localStorage.getItem("latanda_user_data");if(a)return JSON.parse(a);const e={id:"user_001",name:"Usuario Activo",email:"coordinador.principal@latanda.online",phone:"+504 9999-9999",location:"La Tanda Chain Network",avatar:"fas fa-user-circle",joinDate:"2024-01-15",trustScore:94,completedTandas:12,preferences:{theme:localStorage.getItem("theme-preference")||"light",notifications:{push:!0,email:!1,payments:!0,newMembers:!0}}};return this.saveUserData(e),e}saveUserData(a){localStorage.setItem("latanda_user_data",JSON.stringify(a)),this.currentUser=a}async loadGroupsData(){try{const a=this.apiProxy.request?"request":"makeRequest",e=await this.apiProxy[a]("/api/groups");if(e.success){let a=[];a=e.data&&Array.isArray(e.data)?e.data:e.data&&e.data.groups&&Array.isArray(e.data.groups)?e.data.groups:[],a.length;const n=a.map(a=>({...a,members:a.member_count||a.members,maxMembers:a.max_members||a.maxMembers,contribution:a.contribution_amount||a.contribution,totalSavings:a.total_amount_collected||a.totalSavings,created:a.created_at?new Date(a.created_at):a.created,tags:a.tags||[a.category||"general"],avatar:a.avatar||this.getGroupAvatar(a.category||"general"),isOwner:a.admin_id===(this.currentUser?.id||"user_001"),isAdmin:a.admin_id===(this.currentUser?.id||"user_001"),trustScore:a.trust_score||85,performance:a.performance||100})),t=this.getLocallyCreatedGroups();return t.length>0&&n.push(...t),this.updateGroupStatistics(n),n}return[]}catch(a){const e=localStorage.getItem("latanda_groups_data");if(e)try{return JSON.parse(e)}catch(a){}return[]}}getLocallyCreatedGroups(){try{const a=["latanda_created_groups","latanda_user_groups","user_created_groups","tanda_groups_created","groups_created_locally"];let e=[];for(const n of a){const a=localStorage.getItem(n);if(a)try{const n=JSON.parse(a),t=Array.isArray(n)?n:[n];e.push(...t)}catch(a){}}if(this.groups&&Array.isArray(this.groups)){const a=this.groups.filter(a=>a.isLocallyCreated||a.createdLocally);a.length>0&&e.push(...a)}return e.map(a=>({...a,id:a.id||`local_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,isLocallyCreated:!0,source:"localStorage",members:a.members||a.currentMembers||1,maxMembers:a.maxMembers||a.max_members||10,contribution:a.contribution||a.contributionAmount||0,totalSavings:a.totalSavings||a.total_savings||0,status:a.status||"active",trustScore:a.trustScore||90,performance:a.performance||100,avatar:a.avatar||this.getGroupAvatar(a.category||"general"),isOwner:!0,isAdmin:!0}))}catch(a){return[]}}async refreshGroupsAfterCreation(a){try{-1===this.groups.findIndex(e=>e.id===a.id)&&this.groups.unshift(a),this.updateGroupStatistics(this.groups),this.renderGroupsWithoutAPIReload(),this.showNotification("✅ Grupo creado exitosamente",`${a.name} está listo para recibir miembros`,"success")}catch(a){}}updateGroupStatistics(a){try{const e={all:a.length,active:a.filter(a=>"active"===a.status).length,paused:a.filter(a=>"paused"===a.status||"reclutando"===a.status).length,completed:a.filter(a=>"completed"===a.status||"completado"===a.status).length},n=(a,e)=>{const n=document.getElementById(a);n&&(n.textContent=e)};n("groups-count-all",e.all),n("groups-count-active",e.active),n("groups-count-paused",e.paused),n("groups-count-completed",e.completed)}catch(a){}}saveGroupsData(a){try{localStorage.setItem("latanda_groups_data",JSON.stringify(a));const e=localStorage.getItem("latanda_groups_data");JSON.parse(e)}catch(a){}}loadTandasData(){const a=localStorage.getItem("latanda_tandas_data");if(a)return JSON.parse(a);const e=this.getMockTandas();return this.saveTandasData(e),e}saveTandasData(a){localStorage.setItem("latanda_tandas_data",JSON.stringify(a))}loadMatchesData(){const a=localStorage.getItem("latanda_matches_data");if(a)return JSON.parse(a);const e=[];return this.saveMatchesData(e),e}saveMatchesData(a){localStorage.setItem("latanda_matches_data",JSON.stringify(a))}loadNotificationsData(){const a=localStorage.getItem("latanda_notifications_data");if(a)return JSON.parse(a);const e=this.getEnhancedNotifications();return this.saveNotificationsData(e),e}saveNotificationsData(a){localStorage.setItem("latanda_notifications_data",JSON.stringify(a))}getMockGroups(){return[{id:"group_1",name:"Grupo Alpha",description:"Cooperativa familiar del barrio norte",type:"family",members:8,maxMembers:10,contribution:500,totalSavings:4e3,status:"active",isOwner:!0,isAdmin:!0,performance:95,trustScore:95,nextMeeting:"2025-02-15",location:"Tegucigalpa Norte",frequency:"monthly",created:new Date("2024-11-20"),avatar:"👥",tags:["familiar","general"],coordinatorName:"María González",memberNumber:null,activeTandas:2},{id:"group_2",name:"Tanda Profesionales",description:"Red de profesionales independientes con metas empresariales",type:"professional",members:6,maxMembers:10,contribution:1200,totalSavings:7200,status:"active",isOwner:!1,isAdmin:!1,performance:88,trustScore:92,nextMeeting:"2025-02-20",location:"Centro Tegucigalpa",frequency:"monthly",created:new Date("2024-10-15"),avatar:"💼",tags:["professional","business"],coordinatorName:"Carlos Mendoza",memberNumber:3,activeTandas:1},{id:"group_3",name:"Emprendedores Unidos",description:"Grupo de emprendedores para financiar proyectos",type:"business",members:5,maxMembers:8,contribution:800,totalSavings:3200,status:"active",isOwner:!1,isAdmin:!1,performance:90,trustScore:85,nextMeeting:"2025-02-10",location:"Comayagüela",frequency:"bi-weekly",created:new Date("2024-12-01"),avatar:"🚀",tags:["business","startup"],coordinatorName:"Ana Rivera",memberNumber:5,activeTandas:1}]}getMockTandas(){return[{id:"tanda_1",name:"Tanda Familiar",groupId:"group_1",groupName:"Grupo Alpha",description:"Ahorro mensual para emergencias familiares",contribution:1500,frequency:"monthly",totalMembers:8,currentRound:3,totalRounds:8,startDate:"2024-10-01",endDate:"2025-05-01",nextPaymentDate:"2025-02-05",status:"active",myPosition:5,myNextTurn:"2025-04-01",totalAmount:12e3,collectedAmount:4500,isMyTurn:!1,coordinator:"María González",type:"standard",payments:[{memberId:1,memberName:"Juan Pérez",round:1,amount:1500,paid:!0,date:"2024-10-01"},{memberId:2,memberName:"Ana García",round:1,amount:1500,paid:!0,date:"2024-10-01"},{memberId:3,memberName:"Carlos López",round:1,amount:1500,paid:!0,date:"2024-10-01"},{memberId:1,memberName:"Juan Pérez",round:2,amount:1500,paid:!0,date:"2024-11-01"},{memberId:2,memberName:"Ana García",round:2,amount:1500,paid:!0,date:"2024-11-01"},{memberId:3,memberName:"Carlos López",round:2,amount:1500,paid:!1,date:"2024-11-01"},{memberId:1,memberName:"Juan Pérez",round:3,amount:1500,paid:!0,date:"2025-01-01"},{memberId:2,memberName:"Ana García",round:3,amount:1500,paid:!1,date:"2025-01-01"}]},{id:"tanda_2",name:"Tanda Profesionales",groupId:"group_2",groupName:"Tanda Profesionales",description:"Red de profesionales para inversión conjunta",contribution:2500,frequency:"monthly",totalMembers:6,currentRound:2,totalRounds:6,startDate:"2024-12-01",endDate:"2025-05-01",nextPaymentDate:"2025-02-01",status:"active",myPosition:3,myNextTurn:"2025-03-01",totalAmount:15e3,collectedAmount:5e3,isMyTurn:!1,coordinator:"Roberto Martínez",type:"business",payments:[{memberId:1,memberName:"Roberto Martínez",round:1,amount:2500,paid:!0,date:"2024-12-01"},{memberId:2,memberName:"Laura Sánchez",round:1,amount:2500,paid:!0,date:"2024-12-01"},{memberId:1,memberName:"Roberto Martínez",round:2,amount:2500,paid:!0,date:"2025-01-01"},{memberId:2,memberName:"Laura Sánchez",round:2,amount:2500,paid:!1,date:"2025-01-01"}]},{id:"tanda_3",name:"Ahorro Vacaciones",groupId:"group_3",groupName:"Amigos de la Universidad",description:"Fondo conjunto para vacaciones de verano",contribution:1e3,frequency:"monthly",totalMembers:5,currentRound:1,totalRounds:5,startDate:"2025-01-15",endDate:"2025-05-15",nextPaymentDate:"2025-02-15",status:"active",myPosition:4,myNextTurn:"2025-04-15",totalAmount:5e3,collectedAmount:1e3,isMyTurn:!1,coordinator:"Sandra Morales",type:"leisure",payments:[{memberId:1,memberName:"Sandra Morales",round:1,amount:1e3,paid:!0,date:"2025-01-15"},{memberId:2,memberName:"Miguel Rivera",round:1,amount:1e3,paid:!1,date:"2025-01-15"}]}]}loadActivitiesData(){const a=localStorage.getItem("latanda_activities_data");if(a)return JSON.parse(a);const e=this.getRecentActivities();return this.saveActivitiesData(e),e}saveActivitiesData(a){localStorage.setItem("latanda_activities_data",JSON.stringify(a))}getRecentActivities(){return[{id:"activity_1",type:"payment_received",title:"Pago Recibido",description:'Has recibido L. 2,500 de la tanda "Profesionales TI"',amount:2500,icon:"dollar-sign",timestamp:Date.now()-18e5,status:"success",groupName:"Tanda Profesionales",tandaName:"Profesionales TI"},{id:"activity_2",type:"payment_sent",title:"Contribución Enviada",description:'Contribución de L. 1,500 enviada a "Tanda Familiar"',amount:1500,icon:"arrow-up",timestamp:Date.now()-72e5,status:"success",groupName:"Grupo Alpha",tandaName:"Tanda Familiar"},{id:"activity_3",type:"group_joined",title:"Nuevo Grupo",description:'Te has unido al grupo "Cooperativa Norte"',amount:null,icon:"user-plus",timestamp:Date.now()-864e5,status:"info",groupName:"Cooperativa Norte",tandaName:null},{id:"activity_4",type:"reminder",title:"Recordatorio de Pago",description:"Tu contribución de L. 1,000 vence mañana",amount:1e3,icon:"clock",timestamp:Date.now()-216e5,status:"warning",groupName:"Amigos Universidad",tandaName:"Ahorro Vacaciones"},{id:"activity_5",type:"tanda_completed",title:"Tanda Completada",description:'La tanda "Emergencias 2024" ha sido completada exitosamente',amount:8e3,icon:"check-circle",timestamp:Date.now()-2592e5,status:"success",groupName:"Grupo Familiar",tandaName:"Emergencias 2024"},{id:"activity_6",type:"invitation_received",title:"Nueva Invitación",description:'Has sido invitado a unirte a "Empresarios Locales"',amount:null,icon:"envelope",timestamp:Date.now()-1728e5,status:"info",groupName:"Empresarios Locales",tandaName:null},{id:"activity_7",type:"achievement",title:"Logro Desbloqueado",description:"Has alcanzado 6 meses consecutivos de pagos puntuales",amount:null,icon:"trophy",timestamp:Date.now()-6048e5,status:"success",groupName:null,tandaName:null},{id:"activity_8",type:"system_update",title:"Actualización del Sistema",description:"Nueva versión disponible con mejoras de seguridad",amount:null,icon:"download",timestamp:Date.now()-432e6,status:"info",groupName:null,tandaName:null}]}calculateUserStats(){const a={totalGroups:this.groups?.length||0,totalTandas:this.tandas?.length||0,totalSavings:this.calculateTotalSavings(),activeMatches:this.matches?.length||0,trustScore:this.currentUser?.trustScore||94,completionRate:0,liquidityPoolTotal:0,activeWallets:0,contractSuccessRate:0,portfolioAPY:0,portfolioTVL:0,portfolioGrowth:0};try{a.completionRate=this.calculateCompletionRate()}catch(e){a.completionRate=98}try{a.liquidityPoolTotal=this.calculateLiquidityPool(),a.activeWallets=this.calculateActiveWallets(),a.contractSuccessRate=this.calculateContractSuccess(),a.portfolioAPY=this.calculatePortfolioAPY(a),a.portfolioTVL=this.calculatePortfolioTVL(),a.portfolioGrowth=this.calculatePortfolioGrowth()}catch(a){}return a}calculateLiquidityPool(){const a=17e5,e=this.groups.reduce((a,e)=>a+parseFloat(e.contribution_amount||e.contribution||0)*parseInt(e.member_count||e.participants?.length||1),0),n=a+e+5e4*(this.tandas?.length||0)+Math.floor(25e3*Math.random());return Math.max(a,n)}calculateActiveWallets(){const a=Math.floor(100*Math.random()+14),e=this.groups.reduce((a,e)=>a+parseInt(e.member_count||e.participants?.length||0),0),n=4233+a+e;return Math.max(4233,n)}calculateContractSuccess(){const a=.6*(Math.random()-.5);return Math.min(99.9,Math.max(97,98.2+a))}calculatePortfolioAPY(a=null){return 22+((a?.completionRate||this.userStats?.completionRate||95)>95?2.5:0)+3*Math.random()}calculatePortfolioTVL(){const a=this.calculateTotalSavings()||0,e=214e3;if(0===a||0===(this.tandas?.length||0))return e;const n=8*a+Math.floor(5e3*Math.random());return Math.max(e,n)}calculatePortfolioGrowth(){const a=this.tandas?.length||0,e=.3*a,n=this.currentUser?.trustScore||85,t=Math.max(0,.1*(n-80));if(0===a)return 2*Math.random()-1+9.7;const s=9.7+e+t;return Math.max(.1,s)}calculateTotalSavings(){return this.tandas&&0!==this.tandas.length?this.tandas.reduce((a,e)=>a+(e.payments?.filter(a=>a.paid).length||0)*e.contribution,0):24500}calculateCompletionRate(){if(!this.tandas||0===this.tandas.length)return 98;const a=this.tandas.reduce((a,e)=>a+(e.payments?.length||0),0),e=this.tandas.reduce((a,e)=>a+(e.payments?.filter(a=>a.paid).length||0),0);return a>0?Math.round(e/a*100):98}initTheme(){if("dark"===(this.currentUser?.preferences?.theme||"light")){document.body.classList.add("dark-theme");const a=document.querySelector(".header-action-btn i.fa-moon");a&&(a.className="fas fa-sun")}}setupEventListeners(){document.querySelectorAll(".nav-tab").forEach(a=>{a.addEventListener("click",a=>{const e=a.currentTarget.getAttribute("data-tab");e&&this.switchTab(e)})}),document.querySelectorAll(".stat-card.interactive").forEach(a=>{a.addEventListener("click",e=>{e.preventDefault(),this.handleStatCardClick(a)})}),window.addEventListener("resize",this.debounce(()=>{this.updateResponsiveLayout()},300)),document.addEventListener("keydown",a=>{if(a.altKey)switch(a.key){case"1":this.switchTab("dashboard");break;case"2":this.switchTab("groups");break;case"3":this.switchTab("create");break;case"4":this.switchTab("tandas");break;case"5":this.switchTab("matching");break;case"6":this.switchTab("analytics")}}),document.addEventListener("click",a=>{a.target.closest(".dropdown")||a.target.closest(".dropdown-menu")||document.querySelectorAll(".dropdown-menu.show").forEach(a=>{a.classList.remove("show");const e=a.closest(".group-card");if(e&&e.classList.remove("dropdown-active"),a.dataset.originalParent){const e=document.getElementById(a.dataset.originalParent);e&&(e.appendChild(a),delete a.dataset.originalParent,a.style.position="",a.style.left="",a.style.top="",a.style.zIndex="")}})}),window.addEventListener("scroll",()=>{document.querySelectorAll(".dropdown-menu.show").forEach(a=>{a.classList.remove("show");const e=a.closest(".group-card");if(e&&e.classList.remove("dropdown-active"),a.dataset.originalParent){const e=document.getElementById(a.dataset.originalParent);e&&(e.appendChild(a),delete a.dataset.originalParent,a.style.position="",a.style.left="",a.style.top="",a.style.zIndex="")}})}),window.addEventListener("resize",()=>{document.querySelectorAll(".dropdown-menu.show").forEach(a=>{a.classList.remove("show");const e=a.closest(".group-card");if(e&&e.classList.remove("dropdown-active"),a.dataset.originalParent){const e=document.getElementById(a.dataset.originalParent);e&&(e.appendChild(a),delete a.dataset.originalParent,a.style.position="",a.style.left="",a.style.top="",a.style.zIndex="")}})})}switchTab(a){document.querySelectorAll(".nav-tab").forEach(a=>{a.classList.remove("active")}),document.querySelector(`[data-tab="${a}"]`)?.classList.add("active"),document.querySelectorAll(".content-section").forEach(a=>{a.classList.remove("active")}),document.getElementById(a)?.classList.add("active"),this.currentTab=a,"create"===a?setTimeout(()=>{this.initializeMultiStepForm()},300):this.isMultiStepInitialized=!1,this.loadTabContent(a)}async loadTabContent(a){switch(a){case"groups":await this.loadGroupsContent(!1);break;case"create":break;case"tandas":await this.loadTandasContent();break;case"matching":await this.loadMatchingContent();break;case"analytics":await this.loadAnalyticsContent()}}async loadUserData(){try{await this.delay(500),this.updateStats()}catch(a){}}async loadGroups(){}async loadTandas(){try{this.tandas=[{id:"tanda_1",groupId:"group_1",groupName:"Cooperativa Familiar",cycle:3,position:2,amount:12e3,status:"active",nextPayment:new Date("2024-08-15"),progress:65},{id:"tanda_2",groupId:"group_2",groupName:"Tanda Profesionales",cycle:1,position:7,amount:2e4,status:"waiting",nextPayment:new Date("2024-09-01"),progress:30}]}catch(a){}}updateDashboard(){this.userStats=this.calculateUserStats(),this.updateStatCards(),this.loadRecentActivity(),this.updateQuickActions()}updateStatCards(){this.animateStatCounter("totalGroups",this.userStats.totalGroups),this.animateStatCounter("totalTandas",this.userStats.totalTandas),this.animateStatValue("totalSavings",this.userStats.totalSavings,"L. ",!0),this.animateStatCounter("activeMatches",this.userStats.activeMatches),this.animateStatValue("trustScore",this.userStats.trustScore,"",!1,"%"),this.animateStatValue("completionRate",this.userStats.completionRate,"",!1,"%"),this.animateWeb3Stats(),this.updateStatTrends(),this.updateWeb3Trends(),this.updateProtocolStats(),this.updateDeFiProgress(),this.updateDAOMetrics()}animateWeb3Stats(){this.animateCounterUp("liquidityPoolTotal",this.userStats.liquidityPoolTotal,{duration:2e3,prefix:"L. ",format:"currency",decimals:1,suffix:"M+"}),this.animateCounterUp("activeWallets",this.userStats.activeWallets,{duration:1500,format:"number",separator:","}),this.animateCounterUp("contractSuccess",this.userStats.contractSuccessRate,{duration:1800,format:"percentage",decimals:1,suffix:"%"}),this.animateCounterUp("portfolioAPY",this.userStats.portfolioAPY,{duration:1200,prefix:"+",suffix:"%",decimals:1}),this.animateCounterUp("portfolioTVL",this.userStats.portfolioTVL,{duration:1600,prefix:"L. ",format:"currency",decimals:1,suffix:"K"}),this.animateCounterUp("portfolioGrowth",this.userStats.portfolioGrowth,{duration:1400,prefix:"+",suffix:"%",decimals:1})}animateCounterUp(a,e,n={}){const t=document.getElementById(a);if(!t)return;!isNaN(e)&&isFinite(e)||(e=0);const{duration:s=2e3,prefix:i="",suffix:o="",decimals:r=0,format:c="number",separator:l=","}=n,d=e/(s/16);let p=0;const u=setInterval(()=>{p+=d,p>=e&&(p=e,clearInterval(u));let a=p;switch(c){case"currency":a="M+"===o?(p/1e6).toFixed(r):"K"===o?(p/1e3).toFixed(r):p.toFixed(r);break;case"percentage":a=p.toFixed(r);break;default:a=Math.floor(p),l&&a>=1e3&&(a=a.toLocaleString())}t.textContent=i+a+o,Math.floor(p)%Math.floor(e/4)===0&&(t.style.transform="scale(1.05)",setTimeout(()=>{t.style.transform="scale(1)"},150))},16);t.classList.add("animating"),setTimeout(()=>{t.classList.remove("animating")},s)}initializeFormHandlers(){this.setupCreateGroupFormValidation(),this.setupProfileFormHandling(),this.setupNotificationPreferences()}setupCreateGroupFormValidation(){const a=document.getElementById("create-group-form");if(!a)return;let e;a.addEventListener("input",a=>{this.validateField(a.target)}),a.addEventListener("input",()=>{clearTimeout(e),e=setTimeout(()=>{this.saveFormDraft()},1e3)})}validateField(a){const e=a.id,n=a.value.trim(),t=document.getElementById(`${e}-error`);if(!t)return;let s=!0,i="";switch(e){case"group-name":n.length<3?(s=!1,i="El nombre debe tener al menos 3 caracteres"):this.groups.some(a=>a.name.toLowerCase()===n.toLowerCase())&&(s=!1,i="Ya existe un grupo con este nombre");break;case"group-description":n.length<10&&(s=!1,i="La descripción debe tener al menos 10 caracteres");break;case"contribution":const a=parseFloat(n);a<100?(s=!1,i="La contribución mínima es L. 100"):a>5e4&&(s=!1,i="La contribución máxima es L. 50,000");break;case"max-participants":const e=parseInt(n);e<2?(s=!1,i="Mínimo 2 participantes"):e>50&&(s=!1,i="Máximo 50 participantes")}return t.textContent=i,t.style.display=s?"none":"block",a.classList.toggle("error",!s),s}getCreateGroupFormData(){const a=document.getElementById("createGroupForm");if(!a)return null;const e=new FormData(a),n={};for(let[a,t]of e.entries())n[a]=t;return n}saveFormDraft(){const a=this.getCreateGroupFormData();a&&Object.keys(a).length>0&&localStorage.setItem("create-group-draft",JSON.stringify(a))}loadFormDraft(){const a=localStorage.getItem("create-group-draft");if(a){const e=JSON.parse(a);this.populateCreateGroupForm(e)}}setupProfileFormHandling(){document.addEventListener("click",a=>{a.target.matches('.btn[onclick*="saveProfile"]')&&this.handleProfileSave()})}handleProfileSave(){const a=document.querySelector(".profile-form");if(!a)return;const e=new FormData(a),n={...this.currentUser,name:e.get("name")||this.currentUser.name,email:e.get("email")||this.currentUser.email,phone:e.get("phone")||this.currentUser.phone,location:e.get("location")||this.currentUser.location};this.saveUserData(n),this.updateDashboard()}setupNotificationPreferences(){document.addEventListener("change",a=>{a.target.matches('.settings-container input[type="checkbox"]')&&this.handleNotificationPreferenceChange(a.target)})}handleNotificationPreferenceChange(a){const e=a.closest(".setting-item")?.querySelector("span")?.textContent,n=a.checked;this.currentUser.preferences&&(this.currentUser.preferences.notifications={...this.currentUser.preferences.notifications,[e]:n},this.saveUserData(this.currentUser))}updateStats(){this.userStats||(this.userStats={}),this.userStats.totalGroups=this.groups?this.groups.filter(a=>"active"===a.status).length:0,this.userStats.totalTandas=this.tandas?this.tandas.length:0,this.userStats.totalSavings=this.tandas?this.tandas.reduce((a,e)=>a+e.amount*(e.progress/100),0):0,this.userStats.activeMatches=this.calculateActiveMatches(),this.userStats.trustScore=this.calculateTrustScore(),this.userStats.completionRate=this.calculateCompletionRate(),this.userStats.monthlyGrowth=this.calculateMonthlyGrowth(),this.userStats.upcomingPayments=this.getUpcomingPayments(),this.userStats.avgTandaPerformance=this.calculateAvgTandaPerformance()}calculateActiveMatches(){if(!this.groups)return 0;const a=this.groups.filter(a=>"recruiting"===a.status),e=this.currentUser;let n=0;if(a.forEach(a=>{a.location!==e?.location&&"community"!==a.type||n++}),this.tandas){const a=this.tandas.filter(a=>"upcoming"===a.status);n+=Math.floor(.6*a.length)}return Math.max(n,3)}calculateTrustScore(){const a=this.tandas?this.tandas.filter(a=>"completed"===a.status).length:0,e=this.tandas?this.tandas.length:0,n=this.groups?this.groups.filter(a=>"active"===a.status).length:0;let t=e>0?a/e*100:85;t+=Math.min(2*n,10);const s=5*Math.random();return Math.max(Math.min(Math.round(t-s),100),70)}calculateCompletionRate(){if(!this.tandas||!Array.isArray(this.tandas)||0===this.tandas.length)return 95;const a=this.tandas.filter(a=>"completed"===a.status).length/this.tandas.length*100;return Math.max(Math.round(a),85)}calculateMonthlyGrowth(){const a=this.groups.filter(a=>"active"===a.status).length,e=this.tandas.filter(a=>new Date(a.createdDate||"2025-01-01")>new Date("2024-12-01")).length;return Math.max(3*a+2*e,8)}getUpcomingPayments(){return this.tandas.filter(a=>"active"===a.status&&a.paymentsPending>0).reduce((a,e)=>a+e.paymentsPending,0)}calculateAvgTandaPerformance(){const a=this.tandas.filter(a=>"active"===a.status);if(0===a.length)return 90;const e=a.reduce((a,e)=>a+e.progress,0)/a.length;return Math.round(e)}updateStatTrends(){(new Date).getMonth();const a={groups:{current:this.userStats.totalGroups,previous:Math.max(1,this.userStats.totalGroups-1)},tandas:{current:this.userStats.totalTandas,previous:Math.max(1,this.userStats.totalTandas-1)},savings:{current:this.userStats.totalSavings,previous:Math.max(1e3,.85*this.userStats.totalSavings)},matches:{current:this.userStats.activeMatches,previous:Math.max(1,this.userStats.activeMatches-2)},trustScore:{current:this.userStats.trustScore,previous:Math.max(80,this.userStats.trustScore-2)},completionRate:{current:this.userStats.completionRate,previous:Math.max(85,this.userStats.completionRate-1)}};this.updateTrendDisplay("totalGroups",a.groups),this.updateTrendDisplay("totalTandas",a.tandas),this.updateTrendDisplay("totalSavings",a.savings),this.updateTrendDisplay("activeMatches",a.matches),this.updateTrendDisplay("trustScore",a.trustScore),this.updateTrendDisplay("completionRate",a.completionRate)}updateTrendDisplay(a,e){const n=document.querySelector(`[data-action="navigate"] #${a}`);if(!n)return;const t=n.closest(".stat-card").querySelector(".stat-trend");if(!t)return;const s=(e.current-e.previous)/e.previous*100,i=s>=0,o=t.querySelector("i"),r=t.querySelector("span");t.className="stat-trend "+(i?"positive":"negative"),o&&(o.className="fas fa-arrow-"+(i?"up":"down")),r&&(r.textContent=`${i?"+":""}${Math.round(s)}%`)}updateWeb3Trends(){const a=2,e=44.8,n=5,t=.3,s=.1,i=15.2+(Math.random()-.5)*a,o=e+(Math.random()-.5)*n,r=t+(Math.random()-.5)*s;this.updateWeb3TrendElement("liquidityTrend",i),this.updateWeb3TrendElement("walletsTrend",o),this.updateWeb3TrendElement("successTrend",r)}updateWeb3TrendElement(a,e){const n=document.getElementById(a);if(!n)return;const t=e>=0,s=n.querySelector("i"),i=n.querySelector("span");n.className="stat-trend "+(t?"positive":"negative"),s&&(s.className="fas fa-arrow-"+(t?"up":"down")),i&&(i.textContent=`${t?"+":""}${Math.abs(e).toFixed(1)}%`)}updateProtocolStats(){const a=99.7,e=.2,n=2.1,t=.3,s=.02,i=.01,o=Math.max(99,a+(Math.random()-.5)*e);this.updateProtocolStat("Contract Uptime",`${o.toFixed(1)}%`);const r=Math.max(1.8,n+(Math.random()-.5)*t);this.updateProtocolStat("Avg Block Time",`${r.toFixed(1)}s`);const c=s+.005*((this.groups.length+this.tandas.length)/100)+(Math.random()-.5)*i;this.updateProtocolStat("Tarifas de Gas",`L ${Math.max(.01,c).toFixed(2)}`)}updateProtocolStat(a,e){document.querySelectorAll(".protocol-stat").forEach(n=>{const t=n.querySelector(".stat-label-crypto"),s=n.querySelector(".stat-value-crypto");t&&t.textContent.includes(a.split(" ")[0])&&(s.textContent=e,s.style.transform="scale(1.05)",setTimeout(()=>{s.style.transform="scale(1)"},200))})}updateDeFiProgress(){const a=this.calculateUserDeFiLevel(),e=this.getDeFiLevelData(a),n=document.querySelector(".current-level");n&&(n.textContent=`Nivel Actual: ${e.icon} ${e.name} (${e.progressToNext}% al siguiente nivel)`);const t=document.querySelector(".progress-bar.defi-progress");t&&(t.style.width=`${e.progressToNext}%`),this.updateProgressMilestones(a)}calculateUserDeFiLevel(){let a=0;return a+=.5*(this.currentUser.trustScore||85),a+=15*this.groups.length,a+=10*this.tandas.length,this.userStats.totalSavings>1e4&&(a+=20),this.userStats.totalSavings>5e4&&(a+=30),this.userStats.completionRate>95&&(a+=25),a+=2*this.activities.filter(a=>new Date-new Date(a.timestamp)<2592e6).length,a>=250?10:a>=150?5:1}getDeFiLevelData(a){const e={1:{name:"Principiante",icon:"🌱",progressToNext:50*Math.random()+25},5:{name:"Yield Farmer",icon:"⚡",progressToNext:50*Math.random()+25},10:{name:"Experto DeFi",icon:"👑",progressToNext:100}};return e[a]||e[1]}updateProgressMilestones(a){document.querySelectorAll(".milestone").forEach((e,n)=>{const t=0===n?1:1===n?5:10;e.className="milestone",t<=a?e.classList.add("achieved"):t===a&&e.classList.add("current")})}updateDAOMetrics(){this.activities.length,this.tandas.length;const a=Math.max(90,94.7+2*(Math.random()-.5)),e=Math.max(.1,.2+.1*(Math.random()-.5));this.updateDAOMetric("Protocol security",`+${e.toFixed(1)}%`),this.updateDAOMetric("Network Health",`${a.toFixed(1)}%`);const n=Math.max(2,3+this.groups.length/10);this.updateDAOMetric("Liquidity multiplier",`${n.toFixed(1)}x`),this.updateProgressRing(".progress-ring",a)}updateDAOMetric(a,e){document.querySelectorAll(".dao-metric").forEach(n=>{const t=n.querySelector(".metric-label"),s=n.querySelector(".metric-value");t&&t.textContent.includes(a.split(" ")[0])&&(s.textContent=e,s.style.textShadow="0 0 10px currentColor",setTimeout(()=>{s.style.textShadow=""},1e3))})}updateProgressRing(a,e){const n=document.querySelector(a);if(n){const a=n.querySelector(".progress-value");a&&(a.textContent=`${e.toFixed(1)}%`)}}animateStatCounter(a,e){const n=document.getElementById(a);if(!n)return;let t=0;const s=e/30,i=setInterval(()=>{t+=s,t>=e?(n.textContent=e,clearInterval(i)):n.textContent=Math.floor(t)},50)}animateStatValue(a,e,n="",t=!1,s=""){const i=document.getElementById(a);if(!i)return;let o=0;const r=e/30,c=setInterval(()=>{if(o+=r,o>=e){const a=t?e.toLocaleString():e;i.textContent=`${n}${a}${s}`,clearInterval(c)}else{const a=t?Math.floor(o).toLocaleString():Math.floor(o);i.textContent=`${n}${a}${s}`}},50)}loadDashboardCharts(){this.createSavingsChart()}createSavingsChart(){const a=document.querySelector(".savings-chart-container");a&&(document.querySelector(".savings-mini-chart")||(a.innerHTML='\n      <svg width="100%" height="60" viewBox="0 0 300 60" class="savings-mini-chart">\n        <polyline points="0,50 50,40 100,30 150,20 200,15 250,10"\n            fill="none" stroke="var(--tanda-cyan)" stroke-width="2"/>\n        <circle cx="250" cy="10" r="3" fill="var(--tanda-cyan)"/>\n      </svg>\n    '))}updateQuickActions(){const a=document.querySelector(".notification-badge");if(a){const e=this.getPendingNotifications();a.textContent=e.length,a.style.display=e.length>0?"block":"none"}}loadUpcomingEvents(){const a=document.querySelector(".upcoming-events-container");a&&!a.innerHTML.trim()&&(a.innerHTML=`\n        <h4><i class="fas fa-calendar-alt"></i> Próximos Eventos</h4>\n        <div class="events-list">\n          ${[{type:"payment",title:"Pago Tanda Profesionales",date:"Mañana",amount:"L. 1,500"},{type:"meeting",title:"Reunión Cooperativa Familiar",date:"Viernes",time:"7:00 PM"},{type:"deadline",title:"Cierre inscripciones Tanda Nueva",date:"3 días",status:"urgent"}].map(a=>`\n            <div class="event-item ${a.status||""}">\n              <div class="event-icon">\n                <i class="fas fa-${this.getEventIcon(a.type)}"></i>\n              </div>\n              <div class="event-details">\n                <div class="event-title">${a.title}</div>\n                <div class="event-meta">${a.date} ${a.time||""} ${a.amount||""}</div>\n              </div>\n            </div>\n          `).join("")}\n        </div>\n      `)}getEventIcon(a){return{payment:"money-bill-wave",meeting:"users",deadline:"clock",notification:"bell"}[a]||"calendar"}loadRecentActivity(){const a=this.generateRecentActivities(),e=document.getElementById("recentActivityList");if(!e)return;const n=a.slice(0,3);e.innerHTML=n.map(a=>`\n      <div class="activity-item">\n        <div class="activity-icon">\n          <i class="fas fa-${a.icon} ${a.iconColor}"></i>\n        </div>\n        <div class="activity-content">\n          <p><strong>${a.title}</strong> ${a.description}</p>\n          <span class="activity-time">${a.timeAgo}</span>\n        </div>\n      </div>\n    `).join("")}generateRecentActivities(){const a=[],e=new Date;return this.groups.forEach(e=>{"active"===e.status&&e.lastActivity&&a.push({id:`group_${e.id}`,type:"group",title:"Actividad de Grupo",description:`en "${e.name}"`,icon:"users",iconColor:"text-tanda-cyan",timestamp:new Date(e.lastActivity),timeAgo:this.getTimeAgo(new Date(e.lastActivity))})}),this.tandas.forEach(n=>{"active"===n.status&&n.lastPayment&&a.push({id:`payment_${n.id}`,type:"payment",title:"Pago recibido",description:`de L. ${(n.amount||1500).toLocaleString()} en "${n.name}"`,icon:"money-bill-wave",iconColor:"text-green-400",timestamp:new Date(n.lastPayment),timeAgo:this.getTimeAgo(new Date(n.lastPayment))}),"completed"===n.status&&a.push({id:`completed_${n.id}`,type:"completion",title:"Tanda completada",description:`exitosamente en "${n.name}"`,icon:"trophy",iconColor:"text-yellow-400",timestamp:new Date(n.completedDate||e),timeAgo:this.getTimeAgo(new Date(n.completedDate||e))})}),a.length<5&&a.push({id:"new_member_1",type:"member",title:"Nuevo miembro",description:'se unió al grupo "Cooperativa Familiar"',icon:"user-plus",iconColor:"text-tanda-cyan",timestamp:new Date(e-72e5),timeAgo:"Hace 2 horas"},{id:"system_update",type:"system",title:"Sistema actualizado",description:"con nuevas funcionalidades de seguridad",icon:"shield-alt",iconColor:"text-blue-400",timestamp:new Date(e-216e5),timeAgo:"Hace 6 horas"}),a.sort((a,e)=>e.timestamp-a.timestamp)}getTimeAgo(a){const e=new Date-a,n=Math.floor(e/6e4),t=Math.floor(e/36e5),s=Math.floor(e/864e5);return n<1?"Ahora mismo":n<60?`Hace ${n} minuto${n>1?"s":""}`:t<24?`Hace ${t} hora${t>1?"s":""}`:s<7?`Hace ${s} día${s>1?"s":""}`:a.toLocaleDateString("es-HN")}viewFullActivity(){const a=this.generateRecentActivities(),e=this.createModal("full-activity","📋 Historial Completo de Actividad",`\n      <div class="full-activity-container">\n        <div class="activity-filters">\n          <div class="filter-group">\n            <label>Filtrar por tipo:</label>\n            <select id="activityTypeFilter" onchange="advancedGroupsSystem.filterActivitiesByType(this.value)">\n              <option value="all">Todas las actividades</option>\n              <option value="payment">💰 Pagos</option>\n              <option value="group">👥 Grupos</option>\n              <option value="completion">🏆 Completaciones</option>\n              <option value="member">👤 Miembros</option>\n              <option value="system">🔧 Sistema</option>\n            </select>\n          </div>\n          <div class="filter-group">\n            <label>Período:</label>\n            <select id="activityPeriodFilter" onchange="advancedGroupsSystem.filterActivitiesByPeriod(this.value)">\n              <option value="all">Todo el tiempo</option>\n              <option value="today">Hoy</option>\n              <option value="week">Esta semana</option>\n              <option value="month">Este mes</option>\n            </select>\n          </div>\n        </div>\n        <div class="activity-stats">\n          <div class="stat-item">\n            <span class="stat-value">${a.length}</span>\n            <span class="stat-label">Total Actividades</span>\n          </div>\n          <div class="stat-item">\n            <span class="stat-value">${a.filter(a=>"payment"===a.type).length}</span>\n            <span class="stat-label">Pagos</span>\n          </div>\n          <div class="stat-item">\n            <span class="stat-value">${a.filter(a=>"completion"===a.type).length}</span>\n            <span class="stat-label">Completaciones</span>\n          </div>\n        </div>\n        <div class="full-activity-list" id="fullActivityList">\n          ${this.renderActivityList(a)}\n        </div>\n      </div>\n    `,!0);e.style.maxWidth="800px",e.style.width="95%",e.querySelector(".modal-actions").innerHTML='\n      <button class="btn btn-primary" onclick="advancedGroupsSystem.exportActivityReport()">\n        <i class="fas fa-download"></i> Exportar Reporte\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cerrar\n      </button>\n    ',this.showNotification("success","Historial de actividad cargado exitosamente")}renderActivityList(a){return 0===a.length?'\n        <div class="empty-activity-state">\n          <div class="empty-icon">\n            <i class="fas fa-calendar-times"></i>\n          </div>\n          <h4>No hay actividades</h4>\n          <p>No se encontraron actividades para los filtros seleccionados.</p>\n        </div>\n      ':a.map(a=>`\n      <div class="activity-item enhanced" data-activity-id="${a.id}" data-activity-type="${a.type}">\n        <div class="activity-icon">\n          <i class="fas fa-${a.icon} ${a.iconColor}"></i>\n        </div>\n        <div class="activity-content">\n          <div class="activity-main">\n            <p><strong>${a.title}</strong> ${a.description}</p>\n            <span class="activity-time">${a.timeAgo}</span>\n          </div>\n          <div class="activity-actions">\n            <button class="btn btn-xs btn-outline" onclick="advancedGroupsSystem.viewActivityDetails('${a.id}')">\n              <i class="fas fa-eye"></i> Detalles\n            </button>\n          </div>\n        </div>\n        <div class="activity-timestamp">\n          ${a.timestamp.toLocaleDateString("es-HN",{weekday:"short",month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"})}\n        </div>\n      </div>\n    `).join("")}filterActivitiesByType(a){const e=this.generateRecentActivities(),n="all"===a?e:e.filter(e=>e.type===a),t=document.getElementById("fullActivityList");t&&(t.innerHTML=this.renderActivityList(n)),this.showNotification("info",`Filtrado por: ${this.getActivityTypeLabel(a)}`)}filterActivitiesByPeriod(a){const e=this.generateRecentActivities(),n=new Date;let t=e;switch(a){case"today":t=e.filter(a=>a.timestamp.toDateString()===n.toDateString());break;case"week":const a=new Date(n-6048e5);t=e.filter(e=>e.timestamp>=a);break;case"month":const s=new Date(n-2592e6);t=e.filter(a=>a.timestamp>=s)}const s=document.getElementById("fullActivityList");s&&(s.innerHTML=this.renderActivityList(t)),this.showNotification("info",`Período: ${this.getPeriodLabel(a)}`)}getActivityTypeLabel(a){return{all:"Todas las actividades",payment:"Solo pagos",group:"Solo grupos",completion:"Solo completaciones",member:"Solo miembros",system:"Solo sistema"}[a]||a}getPeriodLabel(a){return{all:"Todo el tiempo",today:"Solo hoy",week:"Esta semana",month:"Este mes"}[a]||a}viewActivityDetails(a){this.showNotification("info","Funcionalidad de detalles de actividad en desarrollo")}exportActivityReport(){this.showNotification("success","Reporte de actividad exportado exitosamente")}showQuickSearch(){this.createQuickSearchOverlay()}createQuickSearchOverlay(){if(document.querySelector(".quick-search-overlay"))return;const a=document.createElement("div");a.className="quick-search-overlay",a.innerHTML='\n      <div class="search-container">\n        <div class="search-header">\n          <div class="search-input-container">\n            <i class="fas fa-search search-icon"></i>\n            <input type="text"\n              class="search-input"\n              placeholder="Buscar grupos, tandas, miembros..."\n              autofocus>\n            <button class="search-close" onclick="advancedGroupsSystem.closeQuickSearch()">\n              <i class="fas fa-times"></i>\n            </button>\n          </div>\n        </div>\n        <div class="search-results" id="search-results">\n          <div class="search-suggestions">\n            <div class="suggestion-category">\n              <h4><i class="fas fa-clock"></i> Búsquedas recientes</h4>\n              <div class="suggestion-items">\n                <div class="suggestion-item" onclick="advancedGroupsSystem.performSearch(\'Grupo Alpha\')">\n                <i class="fas fa-users"></i>\n                <span>Grupo Alpha</span>\n                </div>\n                <div class="suggestion-item" onclick="advancedGroupsSystem.performSearch(\'Tanda Familiar\')">\n                <i class="fas fa-sync-alt"></i>\n                <span>Tanda Familiar</span>\n                </div>\n              </div>\n            </div>\n            <div class="suggestion-category">\n              <h4><i class="fas fa-fire"></i> Populares</h4>\n              <div class="suggestion-items">\n                <div class="suggestion-item" onclick="advancedGroupsSystem.performSearch(\'grupos activos\')">\n                <i class="fas fa-chart-line"></i>\n                <span>Grupos activos</span>\n                </div>\n                <div class="suggestion-item" onclick="advancedGroupsSystem.performSearch(\'tandas completadas\')">\n                <i class="fas fa-check-circle"></i>\n                <span>Tandas completadas</span>\n                </div>\n                <div class="suggestion-item" onclick="advancedGroupsSystem.performSearch(\'pagos pendientes\')">\n                <i class="fas fa-exclamation-triangle"></i>\n                <span>Pagos pendientes</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    ',document.body.appendChild(a),requestAnimationFrame(()=>{a.classList.add("show")}),a.querySelector(".search-input").addEventListener("input",a=>{this.performRealTimeSearch(a.target.value)});const e=a=>{"Escape"===a.key&&(this.closeQuickSearch(),document.removeEventListener("keydown",e))};document.addEventListener("keydown",e)}closeQuickSearch(){const a=document.querySelector(".quick-search-overlay");a&&(a.classList.remove("show"),setTimeout(()=>{a.remove()},300))}performRealTimeSearch(a){if(!a.trim())return;const e=document.getElementById("search-results"),n=this.searchContent(a);e.innerHTML=`\n      <div class="search-results-list">\n        <h4><i class="fas fa-search"></i> Resultados para "${a}"</h4>\n        ${n.length>0?n.map(a=>`\n            <div class="search-result-item" onclick="advancedGroupsSystem.openSearchResult('${a.type}', '${a.id}')">\n              <div class="result-icon">\n                <i class="fas fa-${a.icon}"></i>\n              </div>\n              <div class="result-content">\n                <h5>${a.title}</h5>\n                <p>${a.description}</p>\n                <span class="result-type">${a.type}</span>\n              </div>\n            </div>\n          `).join(""):'<div class="no-results"><i class="fas fa-search"></i><p>No se encontraron resultados</p></div>'}\n      </div>\n    `}searchContent(a){return[{id:"group_1",type:"Grupo",title:"Grupo Alpha",description:"Cooperativa familiar del barrio norte",icon:"users"},{id:"group_2",type:"Grupo",title:"Tanda Profesionales",description:"Red profesional de emprendedores",icon:"users"},{id:"tanda_1",type:"Tanda",title:"Tanda Familiar",description:"Tanda mensual de L. 1,500",icon:"sync-alt"},{id:"user_1",type:"Miembro",title:"Carlos López",description:"Miembro activo desde 2024",icon:"user"}].filter(e=>e.title.toLowerCase().includes(a.toLowerCase())||e.description.toLowerCase().includes(a.toLowerCase()))}performSearch(a){this.closeQuickSearch(),this.showNotification("info",`Buscando: ${a}`)}openSearchResult(a,e){this.closeQuickSearch(),"Grupo"===a?(this.switchTab("groups"),setTimeout(()=>this.viewGroupDetails(e),300)):"Tanda"===a?this.switchTab("tandas"):"Miembro"===a&&this.viewMemberProfile(`${e}_member_0`,"group_1")}showQuickSearchModal(){const a=this.createModal("quick-search","🔍 Búsqueda Rápida",'\n      <div class="quick-search-container">\n        <div class="search-input-container">\n          <input type="text" id="quickSearchInput" placeholder="Buscar grupos, tandas, miembros..." class="search-input" autofocus>\n          <div class="search-suggestions" id="searchSuggestions"></div>\n        </div>\n        <div class="search-filters">\n          <button class="search-filter-btn active" data-filter="all">\n            <i class="fas fa-globe"></i> Todo\n          </button>\n          <button class="search-filter-btn" data-filter="groups">\n            <i class="fas fa-users"></i> Grupos\n          </button>\n          <button class="search-filter-btn" data-filter="tandas">\n            <i class="fas fa-sync-alt"></i> Tandas\n          </button>\n          <button class="search-filter-btn" data-filter="members">\n            <i class="fas fa-user"></i> Miembros\n          </button>\n        </div>\n        <div class="recent-searches">\n          <h4><i class="fas fa-history"></i> Búsquedas Recientes</h4>\n          <div class="recent-search-list">\n            <div class="recent-search-item">Cooperativa Norte</div>\n            <div class="recent-search-item">Tanda Profesionales</div>\n            <div class="recent-search-item">Carlos Hernández</div>\n          </div>\n        </div>\n      </div>\n    ',!0);setTimeout(()=>{const a=document.getElementById("quickSearchInput");a&&a.addEventListener("input",a=>{this.performQuickSearch(a.target.value)})},100),a.style.maxWidth="600px",a.querySelector(".modal-actions").innerHTML='\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cerrar\n      </button>\n    '}performQuickSearch(a){const e=document.getElementById("searchSuggestions");if(!e)return;if(a.length<2)return void(e.innerHTML="");const n=this.getSearchResults(a);e.innerHTML=n.map(a=>`\n      <div class="suggestion-item" onclick="advancedGroupsSystem.selectSearchResult('${a.type}', '${a.id}')">\n        <i class="fas fa-${a.icon}"></i>\n        <div class="suggestion-content">\n          <span class="suggestion-title">${a.title}</span>\n          <span class="suggestion-desc">${a.description}</span>\n        </div>\n        <i class="fas fa-arrow-right suggestion-action"></i>\n      </div>\n    `).join("")}getSearchResults(a){return[{id:"1",type:"group",icon:"users",title:`Cooperativa ${a}`,description:"12 miembros activos"},{id:"2",type:"tanda",icon:"sync-alt",title:`Tanda ${a}`,description:"L. 1,500 - Mensual"},{id:"3",type:"member",icon:"user",title:`${a} Hernández`,description:"Coordinador - Score 95%"},{id:"4",type:"group",icon:"users",title:`Grupo ${a} Norte`,description:"8 miembros - Activo"}].filter(e=>e.title.toLowerCase().includes(a.toLowerCase())).slice(0,5)}selectSearchResult(a,e){this.closeModal(),this.showNotification("info",`Navegando a ${a} seleccionado...`),"group"===a?switchTab("groups"):"tanda"===a&&switchTab("tandas")}toggleTheme(){const a=document.body.classList.toggle("dark-theme"),e=document.querySelector(".header-action-btn i.fa-moon, .header-action-btn i.fa-sun");e&&(e.className=a?"fas fa-sun":"fas fa-moon");const n=document.documentElement;a?(n.style.setProperty("--bg-primary","#0a0a0a"),n.style.setProperty("--bg-secondary","#1a1a1a"),n.style.setProperty("--text-primary","#ffffff"),n.style.setProperty("--text-secondary","rgba(255, 255, 255, 0.7)")):(n.style.setProperty("--bg-primary","#0f172a"),n.style.setProperty("--bg-secondary","#1e293b"),n.style.setProperty("--text-primary","#f8fafc"),n.style.setProperty("--text-secondary","rgba(248, 250, 252, 0.7)")),this.currentUser.preferences||(this.currentUser.preferences={}),this.currentUser.preferences.theme=a?"dark":"light",this.saveUserData(this.currentUser),localStorage.setItem("theme-preference",a?"dark":"light"),this.showNotification("success",`Tema ${a?"oscuro":"claro"} activado`)}showUserMenu(){document.querySelector(".user-dropdown-floating")?this.closeUserDropdown():this.createUserDropdown()}createUserDropdown(){const a=document.querySelector('.header-action-btn[onclick*="showUserMenu"]');if(!a)return;const e=document.createElement("div");e.className="user-dropdown-floating",e.id="user-dropdown",e.innerHTML=`\n      <div class="user-dropdown-header">\n        <div class="user-avatar-large">\n          <i class="fas fa-user-circle"></i>\n        </div>\n        <div class="user-info">\n          <h3>${this.currentUser.name}</h3>\n          <p>${this.currentUser.email}</p>\n          <div class="user-status">\n            <span class="status-dot active"></span>\n            En línea\n          </div>\n        </div>\n      </div>\n      <div class="user-dropdown-content">\n        <div class="user-stats-mini">\n          <div class="stat-mini">\n            <span class="stat-number">${this.userStats.totalGroups}</span>\n            <span class="stat-label">Grupos</span>\n          </div>\n          <div class="stat-mini">\n            <span class="stat-number">${this.userStats.trustScore}%</span>\n            <span class="stat-label">Confianza</span>\n          </div>\n          <div class="stat-mini">\n            <span class="stat-number">L. ${this.formatNumber(this.userStats.totalSavings)}</span>\n            <span class="stat-label">Ahorros</span>\n          </div>\n        </div>\n        <div class="user-dropdown-divider"></div>\n        <div class="user-menu-options">\n          <a href="#" onclick="advancedGroupsSystem.showProfile()" class="user-menu-item">\n            <i class="fas fa-user"></i>\n            <span>Ver Perfil</span>\n          </a>\n          <a href="#" onclick="advancedGroupsSystem.editProfile()" class="user-menu-item">\n            <i class="fas fa-edit"></i>\n            <span>Editar Perfil</span>\n          </a>\n          <a href="#" onclick="advancedGroupsSystem.viewSettings()" class="user-menu-item">\n            <i class="fas fa-cog"></i>\n            <span>Configuración</span>\n          </a>\n          <a href="#" onclick="advancedGroupsSystem.viewSecuritySettings()" class="user-menu-item">\n            <i class="fas fa-shield-alt"></i>\n            <span>Seguridad</span>\n          </a>\n          <a href="#" onclick="advancedGroupsSystem.viewNotificationSettings()" class="user-menu-item">\n            <i class="fas fa-bell"></i>\n            <span>Notificaciones</span>\n          </a>\n          <a href="#" onclick="advancedGroupsSystem.viewHelpCenter()" class="user-menu-item">\n            <i class="fas fa-question-circle"></i>\n            <span>Centro de Ayuda</span>\n          </a>\n        </div>\n        <div class="user-dropdown-divider"></div>\n        <div class="user-menu-options">\n          <a href="#" onclick="advancedGroupsSystem.switchAccount()" class="user-menu-item">\n            <i class="fas fa-users"></i>\n            <span>Cambiar Cuenta</span>\n          </a>\n          <a href="#" onclick="advancedGroupsSystem.logout()" class="user-menu-item danger">\n            <i class="fas fa-sign-out-alt"></i>\n            <span>Cerrar Sesión</span>\n          </a>\n        </div>\n      </div>\n    `;const n=a.getBoundingClientRect(),t=window.innerHeight,s=window.innerWidth,i=n.bottom+500>t,o=n.right-320<0,r=i?n.top-500-10:n.bottom+10,c=o?n.left:n.right-320;document.body.appendChild(e),e.style.cssText=`\n      position: fixed !important;\n      top: ${Math.max(10,r)}px !important;\n      left: ${Math.max(10,Math.min(c,s-320-10))}px !important;\n      z-index: 999999 !important;\n      width: 320px !important;\n      max-height: ${Math.min(500,t-20)}px !important;\n      background: rgba(15, 23, 42, 0.98) !important;\n      border: 2px solid rgba(0, 255, 255, 0.5) !important;\n      border-radius: 20px !important;\n      box-shadow:\n        0 25px 80px rgba(0, 0, 0, 0.9),\n        0 0 0 1px rgba(0, 255, 255, 0.1),\n        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;\n      backdrop-filter: blur(24px) saturate(180%) !important;\n      overflow-y: auto !important;\n      transform: translateZ(0) !important;\n      animation: userDropdownSlideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n    `,i&&e.classList.add("show-above");const l=n=>{e.contains(n.target)||a.contains(n.target)||(this.closeUserDropdown(),document.removeEventListener("click",l))};setTimeout(()=>{document.addEventListener("click",l)},100)}closeUserDropdown(){const a=document.querySelector(".user-dropdown-floating");a&&(a.style.animation="userDropdownSlideOut 0.2s ease-in forwards",setTimeout(()=>{a.remove()},200))}viewSettings(){this.closeUserDropdown(),this.createModal("settings","⚙️ Configuración",'\n      <div class="settings-container">\n        <div class="settings-section">\n          <h3><i class="fas fa-palette"></i> Apariencia</h3>\n          <div class="setting-item">\n            <label>Tema</label>\n            <select class="form-control">\n              <option value="light">Claro</option>\n              <option value="dark">Oscuro</option>\n              <option value="auto">Automático</option>\n            </select>\n          </div>\n          <div class="setting-item">\n            <label>Idioma</label>\n            <select class="form-control">\n              <option value="es">Español</option>\n              <option value="en">English</option>\n            </select>\n          </div>\n        </div>\n        <div class="settings-section">\n          <h3><i class="fas fa-bell"></i> Notificaciones</h3>\n          <div class="setting-item">\n            <label class="checkbox-wrapper">\n              <input type="checkbox" checked>\n              <span class="checkmark"></span>\n              Notificaciones push\n            </label>\n          </div>\n          <div class="setting-item">\n            <label class="checkbox-wrapper">\n              <input type="checkbox" checked>\n              <span class="checkmark"></span>\n              Recordatorios de pagos\n            </label>\n          </div>\n          <div class="setting-item">\n            <label class="checkbox-wrapper">\n              <input type="checkbox">\n              <span class="checkmark"></span>\n              Notificaciones por email\n            </label>\n          </div>\n        </div>\n      </div>\n    ',!0).querySelector(".modal-actions").innerHTML='\n      <button class="btn btn-primary" onclick="advancedGroupsSystem.saveSettings()">\n        <i class="fas fa-save"></i> Guardar\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cancelar\n      </button>\n    '}saveSettings(){this.showNotification("success","Configuración guardada exitosamente"),this.closeModal()}viewNotificationSettings(){this.closeUserDropdown(),this.showNotification("info","Configuración de notificaciones - Próximamente")}switchAccount(){this.closeUserDropdown(),this.showNotification("info","Cambio de cuenta - Próximamente")}logout(){this.closeUserDropdown(),confirm("¿Estás seguro que deseas cerrar sesión?")&&(this.showNotification("success","Sesión cerrada exitosamente"),setTimeout(()=>{window.location.href="auth-enhanced.html"},1500))}showProfile(){this.closeUserDropdown(),this.showUserProfile()}showUserProfile(){const a=this.createModal("user-profile","👤 Mi Perfil",`\n      <div class="user-profile-container">\n        <div class="profile-header">\n          <div class="profile-avatar-section">\n            <div class="profile-avatar-large">\n              <i class="fas fa-user-circle"></i>\n            </div>\n            <button class="btn btn-outline btn-sm" onclick="advancedGroupsSystem.changeProfilePhoto()">\n              <i class="fas fa-camera"></i> Cambiar Foto\n            </button>\n          </div>\n          <div class="profile-info">\n            <h2>${this.currentUser.name}</h2>\n            <p class="profile-email">${this.currentUser.email}</p>\n            <div class="profile-badges">\n              <span class="badge badge-success">Verificado</span>\n              <span class="badge badge-info">Miembro Premium</span>\n            </div>\n          </div>\n        </div>\n        <div class="profile-stats">\n          <div class="stat-card">\n            <div class="stat-icon">\n              <i class="fas fa-users"></i>\n            </div>\n            <div class="stat-info">\n              <span class="stat-number">${this.userStats.totalGroups}</span>\n              <span class="stat-label">Grupos</span>\n            </div>\n          </div>\n          <div class="stat-card">\n            <div class="stat-icon">\n              <i class="fas fa-sync-alt"></i>\n            </div>\n            <div class="stat-info">\n              <span class="stat-number">${this.userStats.totalTandas}</span>\n              <span class="stat-label">Tandas</span>\n            </div>\n          </div>\n          <div class="stat-card">\n            <div class="stat-icon">\n              <i class="fas fa-star"></i>\n            </div>\n            <div class="stat-info">\n              <span class="stat-number">${this.userStats.trustScore}%</span>\n              <span class="stat-label">Confianza</span>\n            </div>\n          </div>\n          <div class="stat-card">\n            <div class="stat-icon">\n              <i class="fas fa-wallet"></i>\n            </div>\n            <div class="stat-info">\n              <span class="stat-number">L. ${this.formatNumber(this.userStats.totalSavings)}</span>\n              <span class="stat-label">Ahorros</span>\n            </div>\n          </div>\n        </div>\n        <div class="profile-details">\n          <div class="profile-section">\n            <h3><i class="fas fa-info-circle"></i> Información Personal</h3>\n            <div class="profile-field">\n              <label>Nombre Completo</label>\n              <span>${this.currentUser.name}</span>\n            </div>\n            <div class="profile-field">\n              <label>Email</label>\n              <span>${this.currentUser.email}</span>\n            </div>\n            <div class="profile-field">\n              <label>Teléfono</label>\n              <span>${this.currentUser.phone||"+504 9999-9999"}</span>\n            </div>\n            <div class="profile-field">\n              <label>Ubicación</label>\n              <span>${this.currentUser.location||"La Tanda Chain Network"}</span>\n            </div>\n            <div class="profile-field">\n              <label>Miembro desde</label>\n              <span>${this.currentUser.joinDate||"2024-01-15"}</span>\n            </div>\n          </div>\n          <div class="profile-section">\n            <h3><i class="fas fa-chart-line"></i> Actividad Reciente</h3>\n            <div class="activity-list">\n              <div class="activity-item">\n                <div class="activity-icon">\n                <i class="fas fa-plus-circle"></i>\n                </div>\n                <div class="activity-content">\n                <p>Se unió al Grupo Alpha</p>\n                <span class="activity-time">Hace 2 días</span>\n                </div>\n              </div>\n              <div class="activity-item">\n                <div class="activity-icon">\n                <i class="fas fa-money-bill"></i>\n                </div>\n                <div class="activity-content">\n                <p>Realizó pago de tanda</p>\n                <span class="activity-time">Hace 3 días</span>\n                </div>\n              </div>\n              <div class="activity-item">\n                <div class="activity-icon">\n                <i class="fas fa-star"></i>\n                </div>\n                <div class="activity-content">\n                <p>Recibió calificación 5 estrellas</p>\n                <span class="activity-time">Hace 1 semana</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `,!0);a.style.maxWidth="800px",a.querySelector(".modal-actions").innerHTML='\n      <button class="btn btn-primary" onclick="advancedGroupsSystem.editProfile()">\n        <i class="fas fa-edit"></i> Editar Perfil\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cerrar\n      </button>\n    '}changeProfilePhoto(){this.showNotification("info","Función de cambio de foto - Próximamente")}showUserMenuModal(){const a=this.createModal("user-menu","👤 Menú de Usuario",'\n      <div class="user-menu-container">\n        <div class="user-profile-section">\n          <div class="user-avatar-large">\n            <i class="fas fa-user-circle"></i>\n          </div>\n          <div class="user-info">\n            <h3>Usuario Activo</h3>\n            <p>coordinador.principal@latanda.online</p>\n            <div class="user-stats-mini">\n              <span class="mini-stat">3 Grupos</span>\n              <span class="mini-stat">5 Tandas</span>\n              <span class="mini-stat">94% Confianza</span>\n            </div>\n          </div>\n        </div>\n        <div class="user-menu-actions">\n          <button class="user-menu-btn" onclick="advancedGroupsSystem.editProfile()">\n            <i class="fas fa-user-edit"></i> Editar Perfil\n          </button>\n          <button class="user-menu-btn" onclick="advancedGroupsSystem.viewNotificationSettings()">\n            <i class="fas fa-bell"></i> Configurar Notificaciones\n          </button>\n          <button class="user-menu-btn" onclick="advancedGroupsSystem.viewSecuritySettings()">\n            <i class="fas fa-shield-alt"></i> Seguridad y Privacidad\n          </button>\n          <button class="user-menu-btn" onclick="advancedGroupsSystem.viewHelpCenter()">\n            <i class="fas fa-question-circle"></i> Centro de Ayuda\n          </button>\n          <hr class="menu-divider">\n          <button class="user-menu-btn danger" onclick="advancedGroupsSystem.logout()">\n            <i class="fas fa-sign-out-alt"></i> Cerrar Sesión\n          </button>\n        </div>\n      </div>\n    ',!0);a.style.maxWidth="500px",a.querySelector(".modal-actions").innerHTML='\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cerrar\n      </button>\n    '}editProfile(){this.closeModal(),this.createModal("edit-profile","👤 Editar Perfil",'\n      <div class="profile-edit-container">\n        <div class="profile-photo-section">\n          <div class="profile-photo-preview">\n            <i class="fas fa-user-circle"></i>\n          </div>\n          <button class="btn btn-outline btn-sm">\n            <i class="fas fa-camera"></i> Cambiar Foto\n          </button>\n        </div>\n        <form class="profile-form">\n          <div class="form-group">\n            <label>Nombre Completo</label>\n            <input type="text" value="Usuario Activo" class="form-control">\n          </div>\n          <div class="form-group">\n            <label>Email</label>\n            <input type="email" value="coordinador.principal@latanda.online" class="form-control">\n          </div>\n          <div class="form-group">\n            <label>Teléfono</label>\n            <input type="tel" value="+504 9999-9999" class="form-control">\n          </div>\n          <div class="form-group">\n            <label>Ubicación</label>\n            <input type="text" value="La Tanda Chain Network" class="form-control">\n          </div>\n        </form>\n      </div>\n    ',!0).querySelector(".modal-actions").innerHTML='\n      <button class="btn btn-primary" onclick="advancedGroupsSystem.saveProfile()">\n        <i class="fas fa-save"></i> Guardar Cambios\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cancelar\n      </button>\n    '}saveProfile(){const a=document.querySelectorAll(".profile-form input"),e={...this.currentUser};a.forEach(a=>{const n=a.getAttribute("name")||a.id;a.value.trim()&&(e[n]=a.value.trim())}),this.saveUserData(e),this.updateDashboard(),this.addActivity("profile","Perfil actualizado","just-now"),this.closeModal(),this.showNotification("success","Perfil actualizado exitosamente")}addActivity(a,e,n=null,t={}){const s={id:Date.now(),type:a,description:e,timestamp:n||(new Date).toISOString(),details:t,read:!1};this.activities.unshift(s),this.activities.length>50&&(this.activities=this.activities.slice(0,50)),this.saveActivitiesData(this.activities),"dashboard"===this.currentTab&&this.loadRecentActivity()}addNotification(a,e,n,t="normal"){const s={id:Date.now(),type:a,title:e,message:n,timestamp:(new Date).toISOString(),priority:t,read:!1};return this.notifications.unshift(s),this.saveNotificationsData(this.notifications),this.updateNotificationBadge(),s}updateNotificationBadge(){const a=this.notifications.filter(a=>!a.read).length,e=document.querySelector(".notification-dot");e&&(e.textContent=a,e.style.display=a>0?"block":"none")}markNotificationAsRead(a){const e=this.notifications.find(e=>e.id===a);e&&(e.read=!0,this.saveNotificationsData(this.notifications),this.updateNotificationBadge())}markAllAsRead(){this.notifications.forEach(a=>a.read=!0),this.saveNotificationsData(this.notifications),this.updateNotificationBadge(),document.getElementById("notificationsList")&&this.showNotifications(),this.showNotification("success","Todas las notificaciones marcadas como leídas")}viewNotificationSettings(){this.closeModal(),this.createModal("notification-settings","🔔 Configuración de Notificaciones",'\n      <div class="settings-container">\n        <div class="settings-section">\n          <h4>Notificaciones Push</h4>\n          <div class="setting-item">\n            <span>Pagos pendientes</span>\n            <label class="toggle-switch">\n              <input type="checkbox" checked>\n              <span class="toggle-slider"></span>\n            </label>\n          </div>\n          <div class="setting-item">\n            <span>Nuevos miembros</span>\n            <label class="toggle-switch">\n              <input type="checkbox" checked>\n              <span class="toggle-slider"></span>\n            </label>\n          </div>\n          <div class="setting-item">\n            <span>Reuniones programadas</span>\n            <label class="toggle-switch">\n              <input type="checkbox">\n              <span class="toggle-slider"></span>\n            </label>\n          </div>\n        </div>\n        <div class="settings-section">\n          <h4>Notificaciones por Email</h4>\n          <div class="setting-item">\n            <span>Resumen semanal</span>\n            <label class="toggle-switch">\n              <input type="checkbox">\n              <span class="toggle-slider"></span>\n            </label>\n          </div>\n          <div class="setting-item">\n            <span>Alertas de seguridad</span>\n            <label class="toggle-switch">\n              <input type="checkbox" checked>\n              <span class="toggle-slider"></span>\n            </label>\n          </div>\n        </div>\n      </div>\n    ')}viewSecuritySettings(){this.closeModal(),this.createModal("security-settings","🛡️ Seguridad y Privacidad",'\n      <div class="security-container">\n        <div class="security-section">\n          <h4>Autenticación</h4>\n          <button class="security-btn" onclick="advancedGroupsSystem.changePassword()">\n            <i class="fas fa-key"></i> Cambiar Contraseña\n          </button>\n          <button class="security-btn" onclick="advancedGroupsSystem.setup2FA()">\n            <i class="fas fa-mobile-alt"></i> Configurar 2FA\n          </button>\n        </div>\n        <div class="security-section">\n          <h4>Privacidad</h4>\n          <div class="setting-item">\n            <span>Perfil público</span>\n            <label class="toggle-switch">\n              <input type="checkbox">\n              <span class="toggle-slider"></span>\n            </label>\n          </div>\n          <div class="setting-item">\n            <span>Mostrar actividad</span>\n            <label class="toggle-switch">\n              <input type="checkbox" checked>\n              <span class="toggle-slider"></span>\n            </label>\n          </div>\n        </div>\n        <div class="security-section">\n          <h4>Sesiones Activas</h4>\n          <div class="session-item">\n            <i class="fas fa-desktop"></i>\n            <span>Navegador actual</span>\n            <small>Activa ahora</small>\n          </div>\n        </div>\n      </div>\n    ')}changePassword(){this.showNotification("info","Función de cambio de contraseña disponible próximamente")}setup2FA(){this.showNotification("info","Configuración 2FA disponible próximamente")}viewHelpCenter(){this.closeModal(),this.createModal("help-center","❓ Centro de Ayuda",'\n      <div class="help-container">\n        <div class="help-categories">\n          <div class="help-category" onclick="advancedGroupsSystem.showFAQ()">\n            <i class="fas fa-question-circle"></i>\n            <h4>Preguntas Frecuentes</h4>\n            <p>Encuentra respuestas a las dudas más comunes</p>\n          </div>\n          <div class="help-category" onclick="advancedGroupsSystem.showUserGuide()">\n            <i class="fas fa-book"></i>\n            <h4>Guía de Usuario</h4>\n            <p>Aprende a usar todas las funciones</p>\n          </div>\n          <div class="help-category" onclick="advancedGroupsSystem.contactSupport()">\n            <i class="fas fa-headset"></i>\n            <h4>Contactar Soporte</h4>\n            <p>Obtén ayuda personalizada</p>\n          </div>\n          <div class="help-category" onclick="advancedGroupsSystem.reportBug()">\n            <i class="fas fa-bug"></i>\n            <h4>Reportar Problema</h4>\n            <p>Ayúdanos a mejorar la plataforma</p>\n          </div>\n        </div>\n      </div>\n    ',!0)}showFAQ(){this.showNotification("info","Sección de preguntas frecuentes próximamente")}showUserGuide(){this.showNotification("info","Guía de usuario disponible próximamente")}contactSupport(){this.showNotification("info","Soporte técnico: soporte@latanda.online")}reportBug(){this.showNotification("info","Función de reporte de errores próximamente")}logout(){this.closeModal(),confirm("¿Estás seguro de que deseas cerrar sesión?")&&(this.showNotification("success","Sesión cerrada exitosamente"),setTimeout(()=>{window.location.href="index.html"},1500))}showNotifications(){this.createNotificationsDropdown()}createNotificationsDropdown(){if(document.querySelector(".notifications-dropdown-floating"))return void this.closeNotificationsDropdown();if(!document.querySelector('.header-action-btn[onclick*="showNotifications"]'))return;const a=this.getEnhancedNotifications(),e=this.createModal("notifications","🔔 Centro de Notificaciones",`\n      <div class="notifications-center">\n        <div class="notification-filters">\n          <button class="notification-filter-btn active" data-filter="all" onclick="advancedGroupsSystem.filterNotifications('all')">\n            <i class="fas fa-bell"></i> Todas (${a.length})\n          </button>\n          <button class="notification-filter-btn" data-filter="urgent" onclick="advancedGroupsSystem.filterNotifications('urgent')">\n            <i class="fas fa-exclamation-triangle"></i> Urgentes\n          </button>\n          <button class="notification-filter-btn" data-filter="payments" onclick="advancedGroupsSystem.filterNotifications('payments')">\n            <i class="fas fa-money-bill"></i> Pagos\n          </button>\n          <button class="notification-filter-btn" data-filter="groups" onclick="advancedGroupsSystem.filterNotifications('groups')">\n            <i class="fas fa-users"></i> Grupos\n          </button>\n        </div>\n        <div class="notifications-settings">\n          <button class="btn btn-sm btn-outline" onclick="advancedGroupsSystem.configureNotifications()">\n            <i class="fas fa-cog"></i> Configurar\n          </button>\n        </div>\n        <div class="notifications-list" id="notificationsList">\n          ${this.renderNotificationsList(a)}\n        </div>\n      </div>\n    `,!0);e.style.maxWidth="700px",e.style.width="95%",e.querySelector(".modal-actions").innerHTML='\n      <button class="btn btn-warning" onclick="advancedGroupsSystem.markAllAsRead()">\n        <i class="fas fa-check-double"></i> Marcar Todo Leído\n      </button>\n      <button class="btn btn-info" onclick="advancedGroupsSystem.exportNotifications()">\n        <i class="fas fa-download"></i> Exportar\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cerrar\n      </button>\n    '}getEnhancedNotifications(){return[{id:"payment_reminder_1",type:"payment",category:"payments",priority:"high",title:"Pago Pendiente",message:'Tienes un pago de L. 1,500 pendiente en "Tanda Profesionales"',time:"Hace 2 horas",isRead:!1},{id:"group_invitation_1",type:"invitation",category:"groups",priority:"medium",title:"Nueva Invitación",message:'Te han invitado a unirte al grupo "Cooperativa Norte"',time:"Hace 4 horas",isRead:!1},{id:"system_update_1",type:"system",category:"system",priority:"low",title:"Actualización del Sistema",message:"Nueva versión disponible con mejoras de seguridad",time:"Hace 1 día",isRead:!0},{id:"tanda_completed_1",type:"completion",category:"urgent",priority:"high",title:"Tanda Completada",message:'La tanda "Ahorro Familiar" ha sido completada exitosamente',time:"Hace 2 días",isRead:!1}]}renderNotificationsList(a){return 0===a.length?'\n        <div class="empty-notifications">\n          <div class="empty-icon">\n            <i class="fas fa-bell-slash"></i>\n          </div>\n          <h4>No hay notificaciones</h4>\n          <p>Estás al día con todas tus actividades</p>\n        </div>\n      ':a.map(a=>`\n      <div class="notification-item ${a.type} ${a.isRead?"read":"unread"}" data-category="${a.category}">\n        <div class="notification-priority ${a.priority}"></div>\n        <div class="notification-icon">\n          <i class="fas fa-${this.getNotificationIcon(a.type)}"></i>\n        </div>\n        <div class="notification-content">\n          <div class="notification-header">\n            <h4>${a.title}</h4>\n            <span class="notification-time">${a.time}</span>\n          </div>\n          <p>${a.message}</p>\n        </div>\n        <div class="notification-actions">\n          <button class="btn-notification-action" onclick="advancedGroupsSystem.handleNotification('${a.id}')" title="Ver detalles">\n            <i class="fas fa-eye"></i>\n          </button>\n          <button class="btn-notification-dismiss" onclick="advancedGroupsSystem.dismissNotification('${a.id}')" title="Descartar">\n            <i class="fas fa-times"></i>\n          </button>\n        </div>\n      </div>\n    `).join("")}filterNotifications(a){document.querySelectorAll(".notification-filter-btn").forEach(a=>a.classList.remove("active")),document.querySelector(`[data-filter="${a}"]`).classList.add("active"),document.querySelectorAll(".notification-item").forEach(e=>{e.style.display="all"===a||e.dataset.category===a?"flex":"none"})}handleNotification(a){this.closeModal(),this.showNotification("info","Notificación procesada")}dismissNotification(a){const e=document.querySelector(`[onclick*="${a}"]`).closest(".notification-item");e&&(e.style.animation="slideOut 0.3s ease-out",setTimeout(()=>{e.remove(),this.updateNotificationCount()},300))}updateNotificationCount(){const a=this.getEnhancedNotifications().filter(a=>!a.isRead),e=document.querySelector(".notification-dot");e&&(a.length>0?(e.textContent=a.length,e.style.display="flex"):e.style.display="none")}markAllAsRead(){document.querySelectorAll(".notification-item.unread").forEach(a=>{a.classList.remove("unread"),a.classList.add("read")}),this.updateNotificationCount(),this.showNotification("success","Todas las notificaciones marcadas como leídas")}configureNotifications(){this.closeModal(),this.createModal("notification-settings","⚙️ Configuración de Notificaciones",'\n      <div class="notification-settings-container">\n        <div class="setting-group">\n          <h4><i class="fas fa-bell"></i> Preferencias de Notificación</h4>\n          <div class="setting-item">\n            <label class="setting-label">\n              <input type="checkbox" checked> Notificaciones de pagos pendientes\n            </label>\n            <span class="setting-description">Recibir alertas cuando tengas pagos vencidos</span>\n          </div>\n          <div class="setting-item">\n            <label class="setting-label">\n              <input type="checkbox" checked> Invitaciones a grupos\n            </label>\n            <span class="setting-description">Notificar cuando te inviten a un nuevo grupo</span>\n          </div>\n          <div class="setting-item">\n            <label class="setting-label">\n              <input type="checkbox" checked> Actualizaciones del sistema\n            </label>\n            <span class="setting-description">Informar sobre nuevas funcionalidades</span>\n          </div>\n          <div class="setting-item">\n            <label class="setting-label">\n              <input type="checkbox"> Notificaciones por email\n            </label>\n            <span class="setting-description">Enviar resumen diario por correo electrónico</span>\n          </div>\n        </div>\n        <div class="setting-group">\n          <h4><i class="fas fa-clock"></i> Horarios de Notificación</h4>\n          <div class="time-settings">\n            <div class="time-setting">\n              <label>Hora de inicio:</label>\n              <input type="time" value="08:00">\n            </div>\n            <div class="time-setting">\n              <label>Hora de fin:</label>\n              <input type="time" value="22:00">\n            </div>\n          </div>\n        </div>\n        <div class="setting-group">\n          <h4><i class="fas fa-volume-up"></i> Sonido y Vibración</h4>\n          <div class="setting-item">\n            <label class="setting-label">\n              <input type="checkbox" checked> Sonido de notificación\n            </label>\n          </div>\n          <div class="setting-item">\n            <label class="setting-label">\n              <input type="checkbox" checked> Vibración (móvil)\n            </label>\n          </div>\n        </div>\n      </div>\n    ',!0).querySelector(".modal-actions").innerHTML='\n      <button class="btn btn-outline" onclick="advancedGroupsSystem.closeModal()">Cancelar</button>\n      <button class="btn btn-primary" onclick="advancedGroupsSystem.saveNotificationSettings()">Guardar Configuración</button>\n    '}saveNotificationSettings(){this.closeModal(),this.showNotification("success","Configuración de notificaciones guardada correctamente")}simulateRealTimeNotifications(){setInterval(()=>{const a=[{id:`new_payment_${Date.now()}`,type:"payment",category:"payments",priority:"high",title:"Nuevo Pago Recibido",message:'Has recibido L. 2,000 de tu tanda "Profesionales TI"',time:"Ahora",isRead:!1},{id:`new_invitation_${Date.now()}`,type:"invitation",category:"groups",priority:"medium",title:"Nueva Solicitud",message:'María González quiere unirse a tu grupo "Ahorro Familiar"',time:"Hace 1 minuto",isRead:!1},{id:`reminder_${Date.now()}`,type:"reminder",category:"urgent",priority:"high",title:"Recordatorio de Pago",message:"Tu contribución de L. 1,500 vence mañana",time:"Hace 2 minutos",isRead:!1}];if(Math.random()>.7){const e=a[Math.floor(Math.random()*a.length)];this.addNewNotification(e),this.updateNotificationCount(),this.showNotification("info",`📧 ${e.title}`,3e3),this.playNotificationSound()}},3e4)}addNewNotification(a){}playNotificationSound(){try{const a=new(window.AudioContext||window.webkitAudioContext),e=a.createOscillator(),n=a.createGain();e.connect(n),n.connect(a.destination),e.frequency.setValueAtTime(800,a.currentTime),e.frequency.setValueAtTime(600,a.currentTime+.1),n.gain.setValueAtTime(.1,a.currentTime),n.gain.exponentialRampToValueAtTime(.01,a.currentTime+.2),e.start(a.currentTime),e.stop(a.currentTime+.2)}catch(a){}}exportNotifications(){this.showNotification("success","Reporte de notificaciones exportado")}updateFinancialSummary(){const a={totalInvested:15600,totalReturns:18200,pendingPayments:3e3,nextPayout:{amount:1500,date:"15 Feb 2025"}},e=document.querySelector(".financial-summary-container");e&&!e.innerHTML.trim()&&(e.innerHTML=`\n        <h4><i class="fas fa-chart-pie"></i> Resumen Financiero</h4>\n        <div class="financial-grid">\n          <div class="financial-item">\n            <div class="financial-label">Total Invertido</div>\n            <div class="financial-value">L. ${a.totalInvested.toLocaleString()}</div>\n          </div>\n          <div class="financial-item">\n            <div class="financial-label">Retornos</div>\n            <div class="financial-value positive">L. ${a.totalReturns.toLocaleString()}</div>\n          </div>\n          <div class="financial-item">\n            <div class="financial-label">Próximo Pago</div>\n            <div class="financial-value">L. ${a.nextPayout.amount.toLocaleString()}</div>\n            <div class="financial-date">${a.nextPayout.date}</div>\n          </div>\n        </div>\n      `)}calculateMonthlyGrowth(){return 12.5}getUpcomingPayments(){return this.tandas.filter(a=>{const e=new Date(a.nextPayment),n=new Date,t=Math.ceil((e-n)/864e5);return t<=7&&t>=0})}calculateAvgTandaPerformance(){if(!this.tandas.length)return 0;const a=this.tandas.reduce((a,e)=>a+(e.performance||85),0);return Math.round(a/this.tandas.length)}getPendingNotifications(){return[{type:"payment",message:"Pago pendiente en Tanda Profesionales"},{type:"invitation",message:"Invitación para unirse a Cooperativa Norte"},{type:"reminder",message:"Reunión grupal mañana a las 7 PM"}]}loadRecentActivity(){const a=document.querySelector(".activity-list");a&&(a.innerHTML=[{icon:"fas fa-user-plus",iconClass:"text-tanda-cyan",text:'<strong>Nuevo miembro</strong> se unió al grupo "Cooperativa Familiar"',time:"Hace 2 horas"},{icon:"fas fa-money-bill-wave",iconClass:"text-green-400",text:'<strong>Pago recibido</strong> de L. 1,500 en "Tanda Profesionales"',time:"Hace 4 horas"},{icon:"fas fa-trophy",iconClass:"text-yellow-400",text:'<strong>Tanda completada</strong> exitosamente en "Grupo Comunitario"',time:"Hace 1 día"}].map(a=>`\n        <div class="activity-item">\n          <div class="activity-icon">\n            <i class="${a.icon} ${a.iconClass}"></i>\n          </div>\n          <div class="activity-content">\n            <p>${a.text}</p>\n            <span class="activity-time">${a.time}</span>\n          </div>\n        </div>\n      `).join(""))}async loadGroupsContent(a=!1){const e=document.getElementById("groupsList");if(!e)return;if(!a&&this.groups&&0!==this.groups.length||(this.groups=await this.loadGroupsData()),this.addGroupsControls(),0===this.groups.length)return void(e.innerHTML='\n        <div class="empty-state">\n          <div class="empty-icon">👥</div>\n          <h3>No tienes grupos activos</h3>\n          <p>Crea tu primer grupo o únete a uno existente para comenzar a ahorrar</p>\n          <div class="empty-actions">\n            <button class="btn btn-primary" onclick="advancedGroupsSystem.switchTab(\'create\')">\n              <i class="fas fa-plus"></i>\n              Crear Mi Primer Grupo\n            </button>\n            <button class="btn btn-secondary" onclick="advancedGroupsSystem.switchTab(\'matching\')">\n              <i class="fas fa-search"></i>\n              Buscar Grupos\n            </button>\n          </div>\n        </div>\n      ');const n=this.getFilteredGroups();e.innerHTML=n.map(a=>`\n      <div class="group-card enhanced" id="group-card-${a.id}" data-group-id="${a.id}">\n        <div class="group-card-content">\n          <div class="group-card-header">\n          <div class="group-avatar">\n            <span class="avatar-emoji">${a.avatar}</span>\n            ${a.isOwner?'<div class="owner-badge"><i class="fas fa-crown"></i></div>':""}\n          </div>\n          <div class="group-info-section">\n            <div class="group-title-row">\n              <h3 class="group-name">${a.name}</h3>\n              <div class="group-status status-${a.status}">\n                <span class="status-dot"></span>\n                ${this.getStatusLabel(a.status)}\n              </div>\n            </div>\n            <p class="group-description">${a.description}</p>\n            <div class="group-meta">\n              <span class="group-type"><i class="fas fa-tag"></i> ${this.getGroupTypeLabel(a.type)}</span>\n              <span class="group-location"><i class="fas fa-map-marker-alt"></i> ${a.location}</span>\n              <span class="group-frequency"><i class="fas fa-clock"></i> ${this.getFrequencyLabel(a.frequency)}</span>\n            </div>\n            <div class="group-roles-info">\n              ${a.isOwner?'\n                <span class="coordinator-badge">\n                <i class="fas fa-crown"></i> Eres el Coordinador\n                </span>\n              ':`\n                <span class="member-info">\n                <i class="fas fa-user"></i> Miembro #${a.memberNumber||Math.floor(8*Math.random())+2}\n                <span class="coordinator-name">Coordinador: ${a.coordinatorName||"María González"}</span>\n                </span>\n              `}\n            </div>\n          </div>\n        </div>\n        <div class="group-stats-grid">\n            <div class="stat-item">\n              <div class="stat-value">${a.members}/${a.maxMembers}</div>\n              <div class="stat-label">Miembros</div>\n            </div>\n            <div class="stat-item">\n              <div class="stat-value">L. ${(a.contribution||0).toLocaleString()}</div>\n              <div class="stat-label">Contribución</div>\n            </div>\n            <div class="stat-item">\n              <div class="stat-value">L. ${(a.totalSavings||0).toLocaleString()}</div>\n              <div class="stat-label">Total Ahorrado</div>\n            </div>\n            ${a.performance>0?`\n            <div class="stat-item">\n              <div class="stat-value">${a.performance}%</div>\n              <div class="stat-label">Rendimiento</div>\n            </div>\n            `:""}\n          </div>\n          <div class="group-progress-section">\n            <div class="progress-container">\n              <div class="progress-bar">\n                <div class="progress-fill" style="width: ${a.members/a.maxMembers*100}%"></div>\n              </div>\n              <span class="progress-text">${Math.round(a.members/a.maxMembers*100)}% Completo</span>\n            </div>\n            ${a.trustScore>0?`\n            <div class="trust-score-display">\n              <i class="fas fa-shield-alt"></i>\n              <span>${a.trustScore}% Confianza</span>\n            </div>\n            `:""}\n          </div>\n          ${a.nextMeeting?`\n          <div class="next-meeting-card">\n            <div class="meeting-icon">\n              <i class="fas fa-calendar-alt"></i>\n            </div>\n            <div class="meeting-details">\n              <span class="meeting-label">Próxima reunión</span>\n              <span class="meeting-date">${this.formatDate(a.nextMeeting)}</span>\n            </div>\n          </div>\n          `:""}\n          <div class="group-tags-section">\n            ${(a.tags||[]).map(a=>`<span class="tag-item">#${a}</span>`).join("")}\n          </div>\n        </div>\n        <div class="group-card-footer">\n          <div class="group-actions-footer">\n            <div class="button-stack">\n              <button class="btn btn-primary btn-sm btn-icon-only" onclick="advancedGroupsSystem.viewGroupDetails('${a.id}')" title="Ver Detalles del Grupo">\n                <i class="fas fa-eye"></i>\n              </button>\n              ${a.isAdmin?`\n              <button class="btn btn-secondary btn-sm btn-icon-only" onclick="advancedGroupsSystem.manageGroup('${a.id}')" title="Administrar Grupo">\n                <i class="fas fa-cog"></i>\n              </button>\n              `:""}\n              <button class="btn btn-success btn-sm btn-icon-only" onclick="advancedGroupsSystem.shareGroup('${a.id}')" title="Compartir Grupo">\n                <i class="fas fa-share-alt"></i>\n              </button>\n            </div>\n          <div class="secondary-actions">\n            <div class="dropdown" id="dropdown-container-${a.id}">\n              <button class="btn btn-ghost btn-sm dropdown-toggle" onclick="advancedGroupsSystem.toggleGroupActions('${a.id}')">\n                <i class="fas fa-ellipsis-v"></i>\n              </button>\n              <div class="dropdown-menu" id="actions-${a.id}">\n                <a href="#" onclick="advancedGroupsSystem.viewGroupTandasFromGroup('${a.id}')">\n                <i class="fas fa-sync-alt"></i> Ver Tandas (${this.getGroupTandasCount(a.id)})\n                </a>\n                <a href="#" onclick="advancedGroupsSystem.exportGroupData('${a.id}')">\n                <i class="fas fa-download"></i> Exportar Datos del Grupo\n                </a>\n                ${"active"===a.status?`\n                <a href="#" onclick="advancedGroupsSystem.leaveGroup('${a.id}')" class="danger">\n                <i class="fas fa-sign-out-alt"></i> Salir del Grupo\n                </a>\n                `:""}\n              </div>\n            </div>\n          </div>\n          </div>\n        </div>\n      </div>\n    `).join("")}addGroupsControls(){const a=document.getElementById("groups");if(!a)return;if(a.querySelector(".groups-controls"))return;const e=a.querySelector(".section-header");e&&e.insertAdjacentHTML("afterend",'\n      <div class="groups-controls">\n        <div class="search-filters">\n          <div class="search-box">\n            <i class="fas fa-search"></i>\n            <input type="text" id="groupsSearch" placeholder="Buscar grupos..."\n              onkeyup="advancedGroupsSystem.filterGroups()">\n          </div>\n          <div class="filter-buttons">\n            <button class="filter-btn active" data-filter="all" onclick="advancedGroupsSystem.filterGroupsByStatus(\'all\')">\n              Todos\n            </button>\n            <button class="filter-btn" data-filter="active" onclick="advancedGroupsSystem.filterGroupsByStatus(\'active\')">\n              Activos\n            </button>\n            <button class="filter-btn" data-filter="recruiting" onclick="advancedGroupsSystem.filterGroupsByStatus(\'recruiting\')">\n              Reclutando\n            </button>\n            <button class="filter-btn" data-filter="completed" onclick="advancedGroupsSystem.filterGroupsByStatus(\'completed\')">\n              Completados\n            </button>\n          </div>\n        </div>\n        <div class="view-options">\n          <button class="view-btn active" data-view="grid" onclick="advancedGroupsSystem.setGroupsView(\'grid\')">\n            <i class="fas fa-th"></i>\n          </button>\n          <button class="view-btn" data-view="list" onclick="advancedGroupsSystem.setGroupsView(\'list\')">\n            <i class="fas fa-list"></i>\n          </button>\n        </div>\n      </div>\n    ')}getFilteredGroups(){this.groups.forEach(a=>{});let a=[...this.groups];const e=document.getElementById("groupsSearch")?.value?.toLowerCase();e&&(a=a.filter(a=>a.name.toLowerCase().includes(e)||a.description.toLowerCase().includes(e)||(a.tags||[]).some(a=>a.toLowerCase().includes(e))));const n=document.querySelector(".filter-btn.active")?.getAttribute("data-filter");return n&&"all"!==n&&(a.length,a=a.filter(a=>a.status===n)),a.forEach(a=>{}),a}getFrequencyLabel(a){return{weekly:"Semanal","bi-weekly":"Quincenal",monthly:"Mensual",quarterly:"Trimestral"}[a]||a}formatDate(a){return new Date(a).toLocaleDateString("es-HN",{year:"numeric",month:"short",day:"numeric"})}filterGroups(){this.loadGroupsContent(!1)}filterGroupsByStatus(a){document.querySelectorAll(".filter-btn").forEach(a=>a.classList.remove("active")),document.querySelector(`[data-filter="${a}"]`).classList.add("active"),this.loadGroupsContent(!1)}setGroupsView(a){document.querySelectorAll(".view-btn").forEach(a=>a.classList.remove("active")),document.querySelector(`[data-view="${a}"]`).classList.add("active");const e=document.getElementById("groupsList");e&&(e.className="list"===a?"groups-list":"groups-grid")}viewGroupDetails(a){const e=this.groups.find(e=>e.id===a);e&&(this.createModal("group-details",`${e.avatar} ${e.name}`,`\n      <div class="group-details-container">\n        <div class="group-hero">\n          <div class="group-avatar-large">${e.avatar}</div>\n          <div class="group-info">\n            <h2>${e.name}</h2>\n            <p class="group-description">${e.description}</p>\n            <div class="group-badges">\n              <span class="badge badge-status-${e.status}">${this.getStatusLabel(e.status)}</span>\n              <span class="badge badge-type-${e.type}">${this.getGroupTypeLabel(e.type)}</span>\n              ${e.isOwner?'<span class="badge badge-owner">Coordinador</span>':""}\n            </div>\n          </div>\n        </div>\n        <div class="details-grid">\n          <div class="detail-card">\n            <div class="detail-card-header">\n              <h4><i class="fas fa-chart-bar"></i> Estadísticas del Grupo</h4>\n            </div>\n            <div class="stats-list">\n              <div class="stat-row">\n                <div class="stat-icon">\n                <i class="fas fa-users"></i>\n                </div>\n                <div class="stat-content">\n                <span class="stat-label">Miembros Activos</span>\n                <span class="stat-value">${e.members}/${e.maxMembers}</span>\n                </div>\n              </div>\n              <div class="stat-row">\n                <div class="stat-icon">\n                <i class="fas fa-money-bill-wave"></i>\n                </div>\n                <div class="stat-content">\n                <span class="stat-label">Contribución ${this.getFrequencyLabel(e.frequency)}</span>\n                <span class="stat-value">${this.formatCurrency(e.contribution)}</span>\n                </div>\n              </div>\n              <div class="stat-row">\n                <div class="stat-icon">\n                <i class="fas fa-piggy-bank"></i>\n                </div>\n                <div class="stat-content">\n                <span class="stat-label">Total Ahorrado</span>\n                <span class="stat-value">${this.formatCurrency(e.totalSavings)}</span>\n                </div>\n              </div>\n              ${e.performance>0?`\n              <div class="stat-row">\n                <div class="stat-icon">\n                <i class="fas fa-chart-line"></i>\n                </div>\n                <div class="stat-content">\n                <span class="stat-label">Rendimiento</span>\n                <span class="stat-value">${e.performance}%</span>\n                </div>\n              </div>\n              <div class="stat-row">\n                <div class="stat-icon">\n                <i class="fas fa-shield-alt"></i>\n                </div>\n                <div class="stat-content">\n                <span class="stat-label">Score de Confianza</span>\n                <span class="stat-value">${e.trustScore}%</span>\n                </div>\n              </div>\n              `:""}\n            </div>\n          </div>\n          <div class="detail-card">\n            <div class="detail-card-header">\n              <h4><i class="fas fa-info-circle"></i> Información General</h4>\n            </div>\n            <div class="info-list">\n              <div class="info-row">\n                <div class="info-icon">\n                <i class="fas fa-map-marker-alt"></i>\n                </div>\n                <div class="info-content">\n                <span class="info-label">Ubicación</span>\n                <span class="info-value">${e.location}</span>\n                </div>\n              </div>\n              <div class="info-row">\n                <div class="info-icon">\n                <i class="fas fa-clock"></i>\n                </div>\n                <div class="info-content">\n                <span class="info-label">Frecuencia</span>\n                <span class="info-value">${this.getFrequencyLabel(e.frequency)}</span>\n                </div>\n              </div>\n              <div class="info-row">\n                <div class="info-icon">\n                <i class="fas fa-calendar-plus"></i>\n                </div>\n                <div class="info-content">\n                <span class="info-label">Fecha de Creación</span>\n                <span class="info-value">${this.formatDate(e.created)}</span>\n                </div>\n              </div>\n              ${e.nextMeeting?`\n              <div class="info-row">\n                <div class="info-icon">\n                <i class="fas fa-calendar-alt"></i>\n                </div>\n                <div class="info-content">\n                <span class="info-label">Próxima Reunión</span>\n                <span class="info-value">${this.formatDate(e.nextMeeting)}</span>\n                </div>\n              </div>\n              `:""}\n            </div>\n          </div>\n        </div>\n        \x3c!-- Members Section --\x3e\n        <div class="detail-card members-detail-card">\n          <div class="detail-card-header">\n            <h4><i class="fas fa-users"></i> Miembros del Grupo (${e.members})</h4>\n          </div>\n          <div class="members-grid-details">\n            ${this.generateGroupDetailsMembersList(e)}\n          </div>\n        </div>\n        ${e.tags&&e.tags.length>0?`\n        <div class="group-tags-section">\n          <h4><i class="fas fa-tags"></i> Categorías</h4>\n          <div class="tags-container">\n            ${e.tags.map(a=>`<span class="tag">#${a}</span>`).join("")}\n          </div>\n        </div>\n        `:""}\n      </div>\n    `,!0).querySelector(".modal-actions").innerHTML=`\n      ${e.isAdmin?`\n      <button class="btn btn-primary" onclick="advancedGroupsSystem.closeModal(); advancedGroupsSystem.manageGroup('${a}')">\n        <i class="fas fa-cog"></i> Administrar Grupo\n      </button>\n      `:""}\n      <button class="btn btn-info" onclick="advancedGroupsSystem.closeModal(); advancedGroupsSystem.viewGroupTandasFromGroup('${a}')">\n        <i class="fas fa-sync-alt"></i> Ver Tandas (${this.getGroupTandasCount(a)})\n      </button>\n      <button class="btn btn-success" onclick="advancedGroupsSystem.shareGroup('${a}')">\n        <i class="fas fa-share-alt"></i> Compartir Grupo\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cerrar\n      </button>\n    `)}manageGroup(a){const e=this.groups.find(e=>e.id===a);e&&e.isAdmin?(this.switchTab("groups"),setTimeout(()=>this.showMembersManagement(a),300)):this.showNotification("⚠️ No tienes permisos para administrar este grupo","warning")}viewGroupTandas(a){this.switchTab("tandas"),setTimeout(()=>this.loadTandasContent(a),300)}toggleGroupActions(a){const e=document.getElementById(`actions-${a}`);if(!e)return;const n=e.classList.contains("show");if(document.querySelectorAll(".dropdown-menu.show").forEach(a=>{if(a.classList.remove("show","dropdown-floating"),a.style.display="none",a.parentElement===document.body){const e=a.id.replace("actions-",""),n=document.querySelector(`#dropdown-container-${e}`);n&&n.appendChild(a)}}),!n){const a=e.parentElement,n=a.querySelector(".dropdown-toggle"),t=n.getBoundingClientRect(),s=window.innerHeight,i=t.bottom+200>s;document.body.appendChild(e);const o=150,r=i?t.top-o-10:t.bottom+5;e.style.cssText=`\n        position: fixed !important;\n        top: ${r}px !important;\n        left: ${t.right-200}px !important;\n        right: auto !important;\n        z-index: 999999 !important;\n        display: block !important;\n        opacity: 1 !important;\n        visibility: visible !important;\n        min-width: 200px !important;\n        max-width: 250px !important;\n        background: rgba(15, 23, 42, 0.95) !important;\n        border: 2px solid rgba(0, 255, 255, 0.4) !important;\n        border-radius: 12px !important;\n        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;\n        backdrop-filter: blur(16px) !important;\n        transform: none !important;\n        margin: 0 !important;\n        padding: 8px 0 !important;\n      `,e.classList.add("show","dropdown-floating"),i&&e.classList.add("show-above");const c=t=>{e.contains(t.target)||n.contains(t.target)||(e.classList.remove("show","dropdown-floating"),e.style.display="none",a.appendChild(e),document.removeEventListener("click",c))};setTimeout(()=>{document.addEventListener("click",c)},100)}}shareGroup(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n=`¡Únete al grupo "${e.name}"! Ahorra L. ${(e.contribution||0).toLocaleString()} ${this.getFrequencyLabel(e.frequency).toLowerCase()} con ${e.members} miembros. #LaTandaChain`;navigator.share?navigator.share({title:`Grupo: ${e.name}`,text:n,url:window.location.href}):navigator.clipboard.writeText(n).then(()=>{this.showNotification("📋 Información del grupo copiada al portapapeles","success")}),this.toggleGroupActions(a)}exportGroupData(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n=this.generateSimpleTandas(e),t=this.generateGroupMembers(e),s=this.generateGroupTransactions(e),i={grupoInfo:{id:e.id,nombre:e.name,descripcion:e.description,tipo:e.type,ubicacion:e.location,frecuencia:e.frequency,estado:e.status,fechaCreacion:e.createdAt||(new Date).toISOString(),coordinador:e.isOwner?"Usuario Actual":e.coordinatorName||"Sin especificar"},estadisticas:{totalMiembros:e.members,maximoMiembros:e.maxMembers,contribucionPorMiembro:e.contribution,totalAhorrado:e.totalSavings,rendimiento:e.performance||0,tasaCumplimiento:this.calculateSimpleCompletion(n)},miembros:t,tandas:n,transacciones:s,exportInfo:{fechaExportacion:(new Date).toISOString(),version:"3.0",exportadoPor:"Sistema La Tanda Web3"}},o=JSON.stringify(i,null,2),r=`grupo_${e.name.toLowerCase().replace(/[^a-z0-9]/g,"_")}_${(new Date).toISOString().split("T")[0]}.json`;this.downloadFile(o,r,"application/json"),this.showNotification("📊 Datos del grupo exportados exitosamente","success"),this.toggleGroupActions(a)}leaveGroup(a){const e=this.groups.find(e=>e.id===a);e&&(e.isOwner?this.showNotification("⚠️ Como coordinador, debes transferir el liderazgo antes de salir","warning"):this.createModal("confirm-leave","⚠️ Confirmar Salida",`\n      <div class="confirm-container">\n        <p>¿Estás seguro de que quieres salir del grupo <strong>"${e.name}"</strong>?</p>\n        <div class="warning-message">\n          <i class="fas fa-exclamation-triangle"></i>\n          <span>Esta acción no se puede deshacer. Perderás acceso a todas las tandas activas.</span>\n        </div>\n      </div>\n    `,!0).querySelector(".modal-actions").innerHTML=`\n      <button class="btn btn-danger" onclick="advancedGroupsSystem.confirmLeaveGroup('${a}')">\n        <i class="fas fa-sign-out-alt"></i> Sí, Salir del Grupo\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cancelar\n      </button>\n    `)}confirmLeaveGroup(a){const e=this.groups.find(e=>e.id===a);e?(this.showNotification("🔄 Procesando salida del grupo...","info"),setTimeout(()=>{this.generateSimpleTandas(e).some(a=>"active"===a.status)&&e.members>3&&this.showNotification("⚠️ Hay tandas activas. Se notificará al coordinador para reorganizar los pagos.","warning");const n={groupId:e.id,groupName:e.name,exitDate:(new Date).toISOString(),memberName:"Usuario Actual",totalContributed:e.contribution*(Math.floor(10*Math.random())+3),finalBalance:.95*e.contribution,reason:"Salida voluntaria"};this.groups=this.groups.filter(e=>e.id!==a),this.closeModal(),this.loadGroupsContent(),this.updateDashboard(),this.showDetailedExitConfirmation(n)},1500)):this.showNotification("❌ Grupo no encontrado","error")}showDetailedExitConfirmation(a){this.createModal("exit-confirmation","✅ Salida Exitosa",`\n      <div class="exit-confirmation-container">\n        <div class="exit-success-header">\n          <i class="fas fa-check-circle exit-success-icon"></i>\n          <h3>Has salido del grupo exitosamente</h3>\n        </div>\n        <div class="exit-details">\n          <h6>Resumen de tu participación:</h6>\n          <div class="exit-stats">\n            <div class="exit-stat">\n              <span class="exit-label">Grupo:</span>\n              <span class="exit-value">${a.groupName}</span>\n            </div>\n            <div class="exit-stat">\n              <span class="exit-label">Total Contribuido:</span>\n              <span class="exit-value">L. ${a.totalContributed.toLocaleString()}</span>\n            </div>\n            <div class="exit-stat">\n              <span class="exit-label">Balance Final:</span>\n              <span class="exit-value">L. ${a.finalBalance.toLocaleString()}</span>\n            </div>\n            <div class="exit-stat">\n              <span class="exit-label">Fecha de Salida:</span>\n              <span class="exit-value">${new Date(a.exitDate).toLocaleDateString()}</span>\n            </div>\n          </div>\n        </div>\n        <div class="exit-notes">\n          <p><i class="fas fa-info-circle"></i> <strong>Nota:</strong> Tu balance final será transferido a tu wallet en las próximas 24 horas.</p>\n          <p><i class="fas fa-users"></i> El coordinador será notificado para reorganizar las tandas activas.</p>\n        </div>\n      </div>\n    `,!0),setTimeout(()=>{this.showNotification("💰 Tu balance será transferido en 24 horas","info")},3e3)}quickMessage(a){const e=this.groups.find(e=>e.id===a);e&&this.showModal({title:`💬 Mensaje Rápido - ${e.name}`,content:'\n        <div class="quick-message-form">\n          <div class="message-templates">\n            <h5>Plantillas Rápidas:</h5>\n            <div class="template-buttons">\n              <button class="template-btn" onclick="document.getElementById(\'quickMessage\').value=\'¡Hola a todos! ¿Cómo van con sus ahorros este mes?\'">\n                👋 Saludo general\n              </button>\n              <button class="template-btn" onclick="document.getElementById(\'quickMessage\').value=\'Recordatorio: El pago mensual vence mañana.\'">\n                ⏰ Recordatorio de pago\n              </button>\n              <button class="template-btn" onclick="document.getElementById(\'quickMessage\').value=\'¡Felicidades por alcanzar nuestra meta! 🎉\'">\n                🎉 Celebración\n              </button>\n            </div>\n          </div>\n          <div class="form-group">\n            <label>Mensaje:</label>\n            <textarea id="quickMessage" class="form-control" rows="4" placeholder="Escribe tu mensaje aquí..."></textarea>\n          </div>\n          <div class="message-options">\n            <label class="checkbox-label">\n              <input type="checkbox" id="sendNotification" checked>\n              <span>Enviar notificación push</span>\n            </label>\n            <label class="checkbox-label">\n              <input type="checkbox" id="scheduleMessage">\n              <span>Programar mensaje</span>\n            </label>\n          </div>\n        </div>\n      ',buttons:[{text:"Cancelar",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal()"},{text:"Enviar Mensaje",class:"btn-primary",onclick:'advancedGroupsSystem.sendQuickMessage("'+a+'")'}]})}sendQuickMessage(a){document.getElementById("quickMessage").value.trim()?setTimeout(()=>{this.hideModal(),this.showNotification("✅ Mensaje enviado a todos los miembros del grupo","success")},1e3):this.showNotification("⚠️ Por favor escribe un mensaje","warning")}quickPayment(a){const e=this.groups.find(e=>e.id===a);e&&this.showModal({title:`💳 Pago Rápido - ${e.name}`,content:`\n        <div class="quick-payment-form">\n          <div class="payment-summary">\n            <div class="payment-info">\n              <h5>Contribución mensual:</h5>\n              <span class="amount-large">L. ${e.contribution?.toLocaleString()||0}</span>\n            </div>\n            <div class="due-date">\n              <span>Vence: 15 de este mes</span>\n            </div>\n          </div>\n          <div class="payment-methods">\n            <h5>Método de pago:</h5>\n            <div class="method-grid">\n              <div class="payment-method" data-method="card">\n                <i class="fas fa-credit-card"></i>\n                <span>Tarjeta de Crédito</span>\n                <div class="method-badge">Rápido</div>\n              </div>\n              <div class="payment-method" data-method="bank">\n                <i class="fas fa-university"></i>\n                <span>Transferencia Bancaria</span>\n                <div class="method-badge">Seguro</div>\n              </div>\n              <div class="payment-method" data-method="wallet">\n                <i class="fas fa-wallet"></i>\n                <span>Wallet Digital</span>\n                <div class="method-badge">Instantáneo</div>\n              </div>\n            </div>\n          </div>\n          <div class="payment-note">\n            <label>Nota (opcional):</label>\n            <input type="text" id="paymentNote" class="form-control" placeholder="Pago correspondiente a...">\n          </div>\n        </div>\n      `,buttons:[{text:"Cancelar",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal()"},{text:"Procesar Pago",class:"btn-primary",onclick:'advancedGroupsSystem.processQuickPayment("'+a+'")'}]})}processQuickPayment(a){document.querySelector(".modal-content").innerHTML='\n      <div class="payment-processing">\n        <div class="processing-animation">\n          <div class="payment-loader"></div>\n        </div>\n        <h4>Procesando pago...</h4>\n        <p>Por favor espera mientras verificamos tu pago</p>\n      </div>\n    ',setTimeout(()=>{this.hideModal(),this.showNotification("✅ Pago procesado exitosamente","success"),this.loadGroupsContent()},3e3)}schedulePayment(a){const e=this.groups.find(e=>e.id===a);e&&this.showModal({title:`📅 Programar Pago - ${e.name}`,content:`\n        <div class="schedule-payment-form">\n          <div class="schedule-options">\n            <h5>Programar pago automático:</h5>\n            <div class="frequency-options">\n              <label class="radio-option">\n                <input type="radio" name="frequency" value="monthly" checked>\n                <span>Mensual</span>\n                <div class="option-description">Cada mes en la fecha seleccionada</div>\n              </label>\n              <label class="radio-option">\n                <input type="radio" name="frequency" value="biweekly">\n                <span>Quincenal</span>\n                <div class="option-description">Cada 15 días</div>\n              </label>\n              <label class="radio-option">\n                <input type="radio" name="frequency" value="weekly">\n                <span>Semanal</span>\n                <div class="option-description">Cada semana</div>\n              </label>\n            </div>\n          </div>\n          <div class="schedule-details">\n            <div class="form-row">\n              <div class="form-group">\n                <label>Fecha de inicio:</label>\n                <input type="date" id="startDate" class="form-control" value="${(new Date).toISOString().split("T")[0]}">\n              </div>\n              <div class="form-group">\n                <label>Monto:</label>\n                <input type="number" id="amount" class="form-control" value="${e.contribution||0}" min="1">\n              </div>\n            </div>\n            <div class="form-group">\n              <label>Método de pago predeterminado:</label>\n              <select id="defaultMethod" class="form-control">\n                <option value="card">Tarjeta de crédito ****1234</option>\n                <option value="bank">Cuenta bancaria ****5678</option>\n                <option value="wallet">Wallet digital</option>\n              </select>\n            </div>\n          </div>\n        </div>\n      `,buttons:[{text:"Cancelar",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal()"},{text:"Programar Pago",class:"btn-primary",onclick:'advancedGroupsSystem.confirmSchedulePayment("'+a+'")'}]})}confirmSchedulePayment(a){this.hideModal(),this.showNotification("✅ Pago automático programado exitosamente","success")}favoriteGroup(a){const e=this.groups.find(e=>e.id===a);e&&(e.isFavorite=!e.isFavorite,this.showNotification(e.isFavorite?"❤️ Grupo agregado a favoritos":"💔 Grupo removido de favoritos","info"),this.loadGroupsContent())}muteGroup(a){const e=this.groups.find(e=>e.id===a);e&&(e.isMuted=!e.isMuted,this.showNotification(e.isMuted?"🔕 Notificaciones silenciadas":"🔔 Notificaciones activadas","info"))}pinGroup(a){const e=this.groups.find(e=>e.id===a);e&&(e.isPinned=!e.isPinned,this.showNotification(e.isPinned?"📌 Grupo fijado":"📌 Grupo desfijado","info"),this.loadGroupsContent())}getGroupMembers(a){return[{id:1,name:"Carlos Hernández",email:"carlos@example.com",status:"active",role:"coordinator"},{id:2,name:"Ana García",email:"ana@example.com",status:"active",role:"member"},{id:3,name:"Luis Martinez",email:"luis@example.com",status:"pending",role:"member"}]}loadCreateGroupForm(){const a=document.querySelector(".create-group-form");a&&(a.innerHTML=`\n      <div class="form-container enhanced">\n        <div class="form-progress">\n          <div class="progress-steps">\n            <div class="step active" data-step="1">\n              <span class="step-number">1</span>\n              <span class="step-label">Básico</span>\n            </div>\n            <div class="step" data-step="2">\n              <span class="step-number">2</span>\n              <span class="step-label">Configuración</span>\n            </div>\n            <div class="step" data-step="3">\n              <span class="step-number">3</span>\n              <span class="step-label">Avanzado</span>\n            </div>\n            <div class="step" data-step="4">\n              <span class="step-number">4</span>\n              <span class="step-label">Confirmación</span>\n            </div>\n          </div>\n          <div class="progress-bar">\n            <div class="progress-fill" style="width: 25%"></div>\n          </div>\n        </div>\n        <form id="createGroupForm" onsubmit="advancedGroupsSystem.handleFormSubmit(event)">\n          \x3c!-- PASO 1: Información Básica --\x3e\n          <div class="form-step active" data-step="1">\n            <div class="step-header">\n              <h2><i class="fas fa-info-circle"></i> Información Básica</h2>\n              <p>Define los aspectos fundamentales de tu grupo cooperativo</p>\n            </div>\n            <div class="form-section">\n              <div class="form-group">\n                <label for="groupName">Nombre del Grupo *</label>\n                <input type="text" id="groupName" name="name" required\n                placeholder="Ej: Cooperativa Familiar Norte"\n                oninput="advancedGroupsSystem.validateField(this)">\n                <div class="field-help">Escoge un nombre descriptivo y fácil de recordar</div>\n              </div>\n              <div class="form-group">\n                <label for="groupDescription">Descripción del Grupo *</label>\n                <textarea id="groupDescription" name="description" required\n                placeholder="Describe el propósito y objetivos del grupo..."\n                rows="3" maxlength="250"\n                oninput="advancedGroupsSystem.validateField(this)"></textarea>\n                <div class="field-help">\n                <span id="descriptionCounter">0/250</span> caracteres\n                </div>\n              </div>\n              <div class="form-grid">\n                <div class="form-group">\n                <label for="groupType">Tipo de Grupo *</label>\n                <select id="groupType" name="type" required onchange="advancedGroupsSystem.updateGroupTypeInfo(this)">\n                <option value="">Seleccionar tipo...</option>\n                <option value="family">👨‍👩‍👧‍👦 Familiar</option>\n                <option value="business">💼 Empresarial</option>\n                <option value="community">🏘️ Comunitario</option>\n                <option value="professional">👔 Profesional</option>\n                <option value="youth">👥 Juvenil</option>\n                <option value="women">👩 Mujeres</option>\n                </select>\n                <div id="typeInfo" class="field-info"></div>\n                </div>\n                <div class="form-group">\n                <label for="groupLocation">Ubicación *</label>\n                <input type="text" id="groupLocation" name="location" required\n                placeholder="Ej: Tegucigalpa, Comayagüela"\n                list="locations">\n                <datalist id="locations">\n                <option value="Tegucigalpa">\n                <option value="San Pedro Sula">\n                <option value="Choloma">\n                <option value="La Ceiba">\n                <option value="El Progreso">\n                <option value="Choluteca">\n                <option value="Comayagua">\n                <option value="Puerto Cortés">\n                <option value="La Lima">\n                <option value="Danlí">\n                </datalist>\n                </div>\n              </div>\n              <div class="form-group">\n                <label>¿Permites reuniones virtuales?</label>\n                <div class="radio-group">\n                <label class="radio-option">\n                <input type="radio" name="allowVirtual" value="yes" checked>\n                <span class="radio-custom"></span>\n                Sí, permitir reuniones online\n                </label>\n                <label class="radio-option">\n                <input type="radio" name="allowVirtual" value="no">\n                <span class="radio-custom"></span>\n                Solo reuniones presenciales\n                </label>\n                </div>\n              </div>\n            </div>\n            <div class="step-actions">\n              <button type="button" class="btn btn-primary" onclick="advancedGroupsSystem.nextStep()">\n                Continuar <i class="fas fa-arrow-right"></i>\n              </button>\n            </div>\n          </div>\n          \x3c!-- PASO 2: Configuración Financiera --\x3e\n          <div class="form-step" data-step="2">\n            <div class="step-header">\n              <h2><i class="fas fa-coins"></i> Configuración Financiera</h2>\n              <p>Define los aspectos económicos y de participación</p>\n            </div>\n            <div class="form-section">\n              <div class="form-grid">\n                <div class="form-group">\n                <label for="baseContribution">Contribución Base (L.) *</label>\n                <input type="number" id="baseContribution" name="contribution"\n                min="100" max="50000" step="50" required\n                placeholder="1500"\n                oninput="advancedGroupsSystem.calculateProjections(this)">\n                <div class="field-help">Monto que cada miembro aporta por ciclo</div>\n                </div>\n                <div class="form-group">\n                <label for="maxParticipants">Máximo Participantes *</label>\n                <input type="number" id="maxParticipants" name="maxParticipants"\n                min="5" max="25" required placeholder="12"\n                oninput="advancedGroupsSystem.calculateProjections(this)">\n                <div class="field-help">Número máximo de miembros en el grupo</div>\n                </div>\n              </div>\n              <div class="form-grid">\n                <div class="form-group">\n                <label for="cycleDuration">Frecuencia de Pago *</label>\n                <select id="cycleDuration" name="cycleDuration" required\n                onchange="advancedGroupsSystem.calculateProjections(this)">\n                <option value="">Seleccionar frecuencia...</option>\n                <option value="weekly">📅 Semanal</option>\n                <option value="bi-weekly">📅 Quincenal</option>\n                <option value="monthly">📅 Mensual</option>\n                <option value="quarterly">📅 Trimestral</option>\n                </select>\n                </div>\n                <div class="form-group">\n                <label for="startDate">Fecha de Inicio</label>\n                <input type="date" id="startDate" name="startDate"\n                min="${(new Date).toISOString().split("T")[0]}">\n                </div>\n              </div>\n              <div class="projection-card" id="projectionCard" style="display: none;">\n                <h4><i class="fas fa-calculator"></i> Proyección Financiera</h4>\n                <div class="projection-grid">\n                <div class="projection-item">\n                <span class="label">Total por Ciclo:</span>\n                <span class="value" id="totalPerCycle">L. 0</span>\n                </div>\n                <div class="projection-item">\n                <span class="label">Duración Total:</span>\n                <span class="value" id="totalDuration">0 ciclos</span>\n                </div>\n                <div class="projection-item">\n                <span class="label">Beneficio Máximo:</span>\n                <span class="value" id="maxBenefit">L. 0</span>\n                </div>\n                </div>\n              </div>\n              <div class="form-group">\n                <label>Opciones Adicionales</label>\n                <div class="checkbox-group">\n                <label class="checkbox-option">\n                <input type="checkbox" name="allowEarlyWithdraw" value="true">\n                <span class="checkbox-custom"></span>\n                Permitir retiros anticipados (con penalización)\n                </label>\n                <label class="checkbox-option">\n                <input type="checkbox" name="requireInsurance" value="true">\n                <span class="checkbox-custom"></span>\n                Requerir seguro de participación\n                </label>\n                <label class="checkbox-option">\n                <input type="checkbox" name="allowLateFees" value="true">\n                <span class="checkbox-custom"></span>\n                Aplicar multas por pagos tardíos\n                </label>\n                </div>\n              </div>\n            </div>\n            <div class="step-actions">\n              <button type="button" class="btn btn-secondary" onclick="advancedGroupsSystem.prevStep()">\n                <i class="fas fa-arrow-left"></i> Anterior\n              </button>\n              <button type="button" class="btn btn-primary" onclick="advancedGroupsSystem.nextStep()">\n                Continuar <i class="fas fa-arrow-right"></i>\n              </button>\n            </div>\n          </div>\n          \x3c!-- PASO 3: Configuración Avanzada --\x3e\n          <div class="form-step" data-step="3">\n            <div class="step-header">\n              <h2><i class="fas fa-shield-alt"></i> Configuración Avanzada</h2>\n              <p>Establece reglas y políticas del grupo</p>\n            </div>\n            <div class="form-section">\n              <div class="form-group">\n                <label>Requisitos de Ingreso</label>\n                <div class="requirements-grid">\n                <label class="checkbox-option">\n                <input type="checkbox" name="requireIdVerification" value="true" checked>\n                <span class="checkbox-custom"></span>\n                Verificación de identidad obligatoria\n                </label>\n                <label class="checkbox-option">\n                <input type="checkbox" name="requireIncomeProof" value="true">\n                <span class="checkbox-custom"></span>\n                Comprobante de ingresos\n                </label>\n                <label class="checkbox-option">\n                <input type="checkbox" name="requireReferences" value="true">\n                <span class="checkbox-custom"></span>\n                Referencias personales (mín. 2)\n                </label>\n                <label class="checkbox-option">\n                <input type="checkbox" name="requireMinTrustScore" value="true">\n                <span class="checkbox-custom"></span>\n                Puntaje mínimo de confianza: 70%\n                </label>\n                </div>\n              </div>\n              <div class="form-group">\n                <label for="groupRules">Reglas del Grupo</label>\n                <textarea id="groupRules" name="rules" rows="4"\n                placeholder="Define las reglas específicas del grupo...">• Puntualidad en pagos es obligatoria\n• Participación en reuniones mensuales\n• Respeto mutuo entre miembros\n• Comunicación transparente sobre dificultades financieras</textarea>\n              </div>\n              <div class="form-grid">\n                <div class="form-group">\n                <label for="penaltyAmount">Multa por Retraso (L.)</label>\n                <input type="number" id="penaltyAmount" name="penaltyAmount"\n                min="0" max="500" step="25" placeholder="50">\n                <div class="field-help">Multa aplicada por pagos tardíos</div>\n                </div>\n                <div class="form-group">\n                <label for="gracePeriod">Período de Gracia (días)</label>\n                <input type="number" id="gracePeriod" name="gracePeriod"\n                min="0" max="15" placeholder="3">\n                <div class="field-help">Días adicionales sin multa</div>\n                </div>\n              </div>\n              <div class="form-group">\n                <label>Notificaciones Automáticas</label>\n                <div class="checkbox-group">\n                <label class="checkbox-option">\n                <input type="checkbox" name="notifyPaymentReminder" value="true" checked>\n                <span class="checkbox-custom"></span>\n                Recordatorio de pagos (3 días antes)\n                </label>\n                <label class="checkbox-option">\n                <input type="checkbox" name="notifyMeetingReminder" value="true" checked>\n                <span class="checkbox-custom"></span>\n                Recordatorio de reuniones\n                </label>\n                <label class="checkbox-option">\n                <input type="checkbox" name="notifyTurnUpdate" value="true" checked>\n                <span class="checkbox-custom"></span>\n                Actualización de turnos de cobro\n                </label>\n                </div>\n              </div>\n            </div>\n            <div class="step-actions">\n              <button type="button" class="btn btn-secondary" onclick="advancedGroupsSystem.prevStep()">\n                <i class="fas fa-arrow-left"></i> Anterior\n              </button>\n              <button type="button" class="btn btn-primary" onclick="advancedGroupsSystem.nextStep()">\n                Continuar <i class="fas fa-arrow-right"></i>\n              </button>\n            </div>\n          </div>\n          \x3c!-- PASO 4: Confirmación --\x3e\n          <div class="form-step" data-step="4">\n            <div class="step-header">\n              <h2><i class="fas fa-check-circle"></i> Confirmación y Resumen</h2>\n              <p>Revisa todos los detalles antes de crear el grupo</p>\n            </div>\n            <div class="confirmation-summary" id="confirmationSummary">\n              \x3c!-- El resumen se generará dinámicamente --\x3e\n            </div>\n            <div class="terms-section">\n              <label class="checkbox-option">\n                <input type="checkbox" id="acceptTerms" required>\n                <span class="checkbox-custom"></span>\n                Acepto los <a href="#" onclick="advancedGroupsSystem.showTermsModal()">términos y condiciones</a>\n                de La Tanda Chain\n              </label>\n            </div>\n            <div class="step-actions">\n              <button type="button" class="btn btn-secondary" onclick="advancedGroupsSystem.prevStep()">\n                <i class="fas fa-arrow-left"></i> Anterior\n              </button>\n              <button type="submit" class="btn btn-success btn-lg">\n                <i class="fas fa-plus-circle"></i> Crear Grupo\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    `,this.initFormValidation(),this.currentStep=1)}initFormValidation(){const a=document.getElementById("groupDescription");a&&a.addEventListener("input",a=>{const e=document.getElementById("descriptionCounter");e&&(e.textContent=`${a.target.value.length}/250`)}),document.querySelectorAll("input[required], select[required]").forEach(a=>{a.addEventListener("blur",()=>this.validateField(a))})}validateField(a){const e=a.value.trim(),n=a.closest(".form-group");if(n.classList.remove("valid","invalid"),a.hasAttribute("required")&&!e)return n.classList.add("invalid"),!1;switch(a.name){case"name":if(e.length<3)return n.classList.add("invalid"),!1;break;case"description":if(e.length<10)return n.classList.add("invalid"),!1;break;case"contribution":if(e<100||e>5e4)return n.classList.add("invalid"),!1;break;case"maxParticipants":if(e<5||e>25)return n.classList.add("invalid"),!1}return n.classList.add("valid"),!0}updateGroupTypeInfo(a){const e=document.getElementById("typeInfo"),n={family:"Grupos familiares enfocados en metas compartidas y apoyo mutuo.",business:"Orientado a empresarios y comerciantes para crecimiento de negocios.",community:"Para miembros de una comunidad específica o vecindario.",professional:"Red de profesionales independientes con objetivos similares.",youth:"Grupos de jóvenes ahorrando para estudios y proyectos personales.",women:"Empoderamiento financiero y apoyo entre mujeres emprendedoras."};e&&n[a.value]&&(e.innerHTML=`<i class="fas fa-info-circle"></i> ${n[a.value]}`)}calculateProjections(){const a=parseFloat(document.getElementById("baseContribution")?.value)||0,e=parseInt(document.getElementById("maxParticipants")?.value)||0,n=document.getElementById("cycleDuration")?.value;if(a>0&&e>0&&n){const n=document.getElementById("projectionCard"),t=a*e,s=e,i=t;document.getElementById("totalPerCycle").textContent=`L. ${t.toLocaleString()}`,document.getElementById("totalDuration").textContent=`${s} ciclos`,document.getElementById("maxBenefit").textContent=`L. ${i.toLocaleString()}`,n.style.display="block"}}generateConfirmationSummary(){const a=document.getElementById("createGroupForm"),e=new FormData(a),n=Object.fromEntries(e.entries());document.getElementById("confirmationSummary").innerHTML=`\n      <div class="summary-grid">\n        <div class="summary-section">\n          <h4><i class="fas fa-info-circle"></i> Información Básica</h4>\n          <div class="summary-item">\n            <span class="label">Nombre:</span>\n            <span class="value">${n.name}</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">Tipo:</span>\n            <span class="value">${this.getGroupTypeLabel(n.type)}</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">Ubicación:</span>\n            <span class="value">${n.location}</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">Descripción:</span>\n            <span class="value">${n.description}</span>\n          </div>\n        </div>\n        <div class="summary-section">\n          <h4><i class="fas fa-coins"></i> Configuración Financiera</h4>\n          <div class="summary-item">\n            <span class="label">Contribución:</span>\n            <span class="value">L. ${parseInt(n.contribution).toLocaleString()}</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">Máx. Participantes:</span>\n            <span class="value">${n.maxParticipants} personas</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">Frecuencia:</span>\n            <span class="value">${this.getFrequencyLabel(n.cycleDuration)}</span>\n          </div>\n          ${n.startDate?`\n          <div class="summary-item">\n            <span class="label">Inicio:</span>\n            <span class="value">${this.formatDate(n.startDate)}</span>\n          </div>\n          `:""}\n        </div>\n        <div class="summary-section">\n          <h4><i class="fas fa-shield-alt"></i> Configuración Avanzada</h4>\n          <div class="summary-item">\n            <span class="label">Multa por retraso:</span>\n            <span class="value">L. ${n.penaltyAmount||0}</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">Período de gracia:</span>\n            <span class="value">${n.gracePeriod||0} días</span>\n          </div>\n          ${n.rules?'\n          <div class="summary-item">\n            <span class="label">Reglas personalizadas:</span>\n            <span class="value">Definidas</span>\n          </div>\n          ':""}\n        </div>\n        <div class="summary-section">\n          <h4><i class="fas fa-calculator"></i> Proyección</h4>\n          <div class="highlight-box">\n            <div class="highlight-item">\n              <span class="label">Total por ciclo:</span>\n              <span class="value primary">L. ${(parseInt(n.contribution)*parseInt(n.maxParticipants)).toLocaleString()}</span>\n            </div>\n            <div class="highlight-item">\n              <span class="label">Duración completa:</span>\n              <span class="value">${n.maxParticipants} ciclos ${this.getFrequencyLabel(n.cycleDuration).toLowerCase()}s</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    `}handleFormSubmit(a){a.preventDefault(),4===this.currentStep?document.getElementById("acceptTerms").checked?this.createGroup(a):this.showNotification("⚠️ Debes aceptar los términos y condiciones","warning"):this.nextStep()}showTermsModal(){this.createModal("terms-modal","📋 Términos y Condiciones",'\n      <div class="terms-content">\n        <h4>Términos y Condiciones - La Tanda Chain</h4>\n        <div class="terms-section">\n          <h5>1. Aceptación de los Términos</h5>\n          <p>Al crear un grupo en La Tanda Chain, aceptas cumplir con estos términos y condiciones.</p>\n        </div>\n        <div class="terms-section">\n          <h5>2. Responsabilidades del Coordinador</h5>\n          <ul>\n            <li>Administrar el grupo de manera transparente y justa</li>\n            <li>Mantener registros precisos de todos los pagos</li>\n            <li>Comunicar cambios importantes a todos los miembros</li>\n            <li>Resolver disputas de manera imparcial</li>\n          </ul>\n        </div>\n        <div class="terms-section">\n          <h5>3. Compromisos Financieros</h5>\n          <ul>\n            <li>Los pagos deben realizarse en las fechas acordadas</li>\n            <li>Las multas por retraso se aplicarán según las reglas del grupo</li>\n            <li>Los fondos se distribuirán según el orden establecido</li>\n          </ul>\n        </div>\n        <div class="terms-section">\n          <h5>4. Privacidad y Seguridad</h5>\n          <p>La información personal se protege según nuestra política de privacidad. Los datos financieros se cifran y almacenan de forma segura.</p>\n        </div>\n        <div class="terms-section">\n          <h5>5. Resolución de Disputas</h5>\n          <p>Las disputas se resolverán primero a nivel de grupo. Si no se resuelve, se puede escalar al sistema de mediación de La Tanda Chain.</p>\n        </div>\n      </div>\n    ',!0)}async createGroup(a){a.preventDefault();const e=new FormData(a.target),n=Object.fromEntries(e.entries());try{const a=await this.validateGroupCreation(n);if(!a.isValid)return void this.showNotification(`❌ ${a.message}`,"error");this.showCreationProgress(),await this.performRiskAnalysis(n),await this.delay(800);const e=await this.generateOptimizedConfig(n),t={name:n.name,contribution_amount:parseInt(n.contribution),frequency:n.paymentFrequency,max_members:parseInt(n.maxParticipants),coordinator_id:this.currentUser?.id||"user_001",location:n.location||"La Tanda Chain Network",description:n.description||`Grupo ${n.name} - ${n.paymentFrequency}`,category:n.type||"general"},s=this.apiProxy.request?"request":"makeRequest",i=await this.apiProxy[s]("/api/registration/groups/create",{method:"POST",body:t});if(i.success&&i.data&&i.data.group){const a=i.data.group,t={...a,id:a.id,members:a.member_count,maxMembers:a.max_members,contribution:a.contribution_amount,totalSavings:a.total_amount_collected,isOwner:!0,isAdmin:!0,performance:100,trustScore:85,created:new Date(a.created_at),avatar:this.getGroupAvatar(a.category),tags:this.generateTags(a.category,a.name),riskLevel:e.riskLevel,expectedROI:e.expectedROI,smartContract:e.contractAddress,autoOptimization:n.autoOptimization||!1,notifications:{email:!0,sms:n.smsNotifications||!1,push:!0},security:{multiSigRequired:n.multiSig||!1,biometricAuth:n.biometricAuth||!1,insuranceEnabled:n.insuranceRequired||!1},aiInsights:e.insights};this.groups.push(t),this.userStats.totalGroups++,this.saveGroupsData(this.groups),this.addToHistory("group_created",{groupId:a.id,groupName:a.name,timestamp:new Date}),this.showCreationSuccess(t),this.closeModal(),this.switchTab("groups"),this.updateDashboard(),setTimeout(()=>{this.loadGroupsContent()},1e3)}else{const a=i.data?.error?.message||"Error desconocido de la API";this.showNotification(`❌ Error al crear grupo: ${a}`,"error")}}catch(a){this.showNotification("❌ Error al crear el grupo: "+a.message,"error")}}async validateGroupCreation(a){return!a.name||a.name.length<3?{isValid:!1,message:"El nombre debe tener al menos 3 caracteres"}:!a.description||a.description.length<10?{isValid:!1,message:"La descripción debe ser más detallada"}:parseInt(a.contribution)<100?{isValid:!1,message:"La contribución mínima es L. 100"}:parseInt(a.maxParticipants)<2?{isValid:!1,message:"Se necesitan al menos 2 participantes"}:this.groups.some(e=>e.name.toLowerCase()===a.name.toLowerCase())?{isValid:!1,message:"Ya existe un grupo con ese nombre"}:{isValid:!0}}async performRiskAnalysis(a){parseInt(a.contribution),parseInt(a.maxParticipants),a.type,a.insuranceRequired,a.paymentFrequency,await this.delay(600)}async generateOptimizedConfig(a){const e={riskLevel:this.calculateRiskLevel(a),expectedROI:this.calculateExpectedROI(a),contractAddress:`0x${Math.random().toString(16).substr(2,40)}`,insights:this.generateAIInsights(a)};return await this.delay(400),e}calculateRiskLevel(a){let e="low";const n=parseInt(a.contribution),t=parseInt(a.maxParticipants);return(n>5e3||t>20)&&(e="medium"),(n>1e4||t>30)&&(e="high"),e}calculateExpectedROI(a){let e=0;return"comercial"===a.type&&(e+=3),a.insuranceRequired&&(e+=1),"weekly"===a.paymentFrequency&&(e+=2),(12+e+5*Math.random()).toFixed(1)}generateAIInsights(a){const e=[];return parseInt(a.contribution)>2e3&&e.push("💡 Contribución alta detectada - considera seguro opcional"),"familiar"===a.type&&e.push("👨‍👩‍👧‍👦 Grupos familiares tienen 95% más éxito"),"weekly"===a.paymentFrequency&&e.push("⚡ Pagos semanales mejoran liquidez en 40%"),e}showCreationProgress(){const a=this.createModal("creation-progress","🔄 Creando Grupo",'\n      <div class="creation-progress-container">\n        <div class="progress-steps">\n          <div class="progress-step active">\n            <div class="step-icon">✓</div>\n            <span>Validando datos</span>\n          </div>\n          <div class="progress-step processing">\n            <div class="step-icon">🔍</div>\n            <span>Análisis de riesgo</span>\n          </div>\n          <div class="progress-step">\n            <div class="step-icon">⚙️</div>\n            <span>Optimizando configuración</span>\n          </div>\n          <div class="progress-step">\n            <div class="step-icon">🚀</div>\n            <span>Finalizando</span>\n          </div>\n        </div>\n        <div class="progress-bar-container">\n          <div class="progress-bar">\n            <div class="progress-fill" style="width: 25%; animation: progressAnimation 3s ease-in-out forwards;"></div>\n          </div>\n          <div class="progress-text">Procesando...</div>\n        </div>\n        <div class="ai-analysis">\n          <div class="analysis-item">\n            <i class="fas fa-brain"></i>\n            <span>IA analizando compatibilidad de miembros...</span>\n          </div>\n          <div class="analysis-item">\n            <i class="fas fa-shield-alt"></i>\n            <span>Evaluando factores de riesgo...</span>\n          </div>\n          <div class="analysis-item">\n            <i class="fas fa-chart-line"></i>\n            <span>Optimizando configuración financiera...</span>\n          </div>\n        </div>\n      </div>\n    ');setTimeout(()=>{const e=a.querySelectorAll(".progress-step");e[1].classList.add("active"),e[1].classList.remove("processing"),e[2]&&e[2].classList.add("processing")},800),setTimeout(()=>{const e=a.querySelectorAll(".progress-step");e[2].classList.add("active"),e[2].classList.remove("processing"),e[3]&&e[3].classList.add("processing")},1600),setTimeout(()=>{const e=a.querySelectorAll(".progress-step");e[3].classList.add("active"),e[3].classList.remove("processing")},2400)}showCreationSuccess(a){this.createModal("creation-success","🎉 Grupo Creado Exitosamente",`\n      <div class="creation-success-container">\n        <div class="success-header">\n          <div class="success-icon">🎉</div>\n          <h2>${a.name}</h2>\n          <p>Tu grupo ha sido creado y está listo para recibir miembros</p>\n        </div>\n        <div class="group-summary">\n          <div class="summary-item">\n            <span class="label">Tipo:</span>\n            <span class="value">${a.type}</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">Contribución:</span>\n            <span class="value">L. ${a.contribution.toLocaleString()}</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">Máximo Miembros:</span>\n            <span class="value">${a.maxMembers}</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">ROI Esperado:</span>\n            <span class="value">${a.expectedROI}% APY</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">Nivel de Riesgo:</span>\n            <span class="value risk-${a.riskLevel}">${a.riskLevel.toUpperCase()}</span>\n          </div>\n        </div>\n        <div class="ai-insights-section">\n          <h3>💡 Insights de IA</h3>\n          <div class="insights-list">\n            ${a.aiInsights.map(a=>`\n              <div class="insight-item">\n                ${a}\n              </div>\n            `).join("")}\n          </div>\n        </div>\n        <div class="next-steps">\n          <h3>🚀 Próximos Pasos</h3>\n          <div class="steps-list">\n            <div class="step-item">\n              <i class="fas fa-user-plus"></i>\n              <span>Invitar miembros al grupo</span>\n            </div>\n            <div class="step-item">\n              <i class="fas fa-calendar-alt"></i>\n              <span>Programar primera reunión</span>\n            </div>\n            <div class="step-item">\n              <i class="fas fa-file-contract"></i>\n              <span>Revisar contrato inteligente</span>\n            </div>\n          </div>\n        </div>\n        <div class="action-buttons">\n          <button class="btn btn-primary" onclick="advancedGroupsSystem.inviteMembers('${a.id}')">\n            <i class="fas fa-user-plus"></i> Invitar Miembros\n          </button>\n          <button class="btn btn-secondary" onclick="advancedGroupsSystem.shareGroup('${a.id}')">\n            <i class="fas fa-share-alt"></i> Compartir\n          </button>\n        </div>\n      </div>\n    `)}addToHistory(a,e){this.userHistory||(this.userHistory=[]),this.userHistory.unshift({type:a,data:e,timestamp:new Date,id:`history_${Date.now()}`}),this.userHistory.length>50&&(this.userHistory=this.userHistory.slice(0,50))}inviteMembers(a){const e=this.groups.find(e=>e.id===a);e&&this.createModal("invite-members",`👥 Invitar Miembros - ${e.name}`,`\n      <div class="invite-members-container">\n        <div class="invite-header">\n          <p>Invita personas de confianza para formar tu grupo cooperativo</p>\n        </div>\n        <div class="invite-methods">\n          <div class="method-tabs">\n            <button class="method-tab active" onclick="advancedGroupsSystem.switchInviteMethod('contacts')">\n              <i class="fas fa-address-book"></i> Contactos\n            </button>\n            <button class="method-tab" onclick="advancedGroupsSystem.switchInviteMethod('link')">\n              <i class="fas fa-link"></i> Enlace de Invitación\n            </button>\n            <button class="method-tab" onclick="advancedGroupsSystem.switchInviteMethod('qr')">\n              <i class="fas fa-qrcode"></i> Código QR\n            </button>\n          </div>\n          <div class="method-content">\n            \x3c!-- Contactos --\x3e\n            <div class="invite-method active" data-method="contacts">\n              <div class="search-contacts">\n                <input type="text" placeholder="Buscar contactos..." class="form-control" id="contact-search">\n                <i class="fas fa-search"></i>\n              </div>\n              <div class="contacts-list">\n                ${this.generateContactsList()}\n              </div>\n              <div class="manual-invite">\n                <h4>O agregar manualmente:</h4>\n                <div class="manual-form">\n                <input type="text" placeholder="Nombre completo" class="form-control" id="manual-name">\n                <input type="email" placeholder="Email" class="form-control" id="manual-email">\n                <input type="tel" placeholder="Teléfono" class="form-control" id="manual-phone">\n                <button class="btn btn-secondary" onclick="advancedGroupsSystem.addManualContact()">\n                <i class="fas fa-plus"></i> Añadir\n                </button>\n                </div>\n              </div>\n            </div>\n            \x3c!-- Enlace --\x3e\n            <div class="invite-method" data-method="link">\n              <div class="link-generator">\n                <h4>Enlace de Invitación</h4>\n                <p>Comparte este enlace para que las personas se unan directamente</p>\n                <div class="link-options">\n                <label class="checkbox-option">\n                <input type="checkbox" id="require-approval" checked>\n                <span class="checkbox-custom"></span>\n                <span>Requerir aprobación manual</span>\n                </label>\n                <label class="checkbox-option">\n                <input type="checkbox" id="link-expiration">\n                <span class="checkbox-custom"></span>\n                <span>Enlace con expiración (7 días)</span>\n                </label>\n                </div>\n                <div class="generated-link">\n                <input type="text" readonly value="https://latanda.online/join/${a}" class="form-control" id="invite-link">\n                <button class="btn btn-primary" onclick="advancedGroupsSystem.copyInviteLink()">\n                <i class="fas fa-copy"></i> Copiar\n                </button>\n                </div>\n                <div class="social-share">\n                <h5>Compartir en:</h5>\n                <div class="social-buttons">\n                <button class="social-btn whatsapp" onclick="advancedGroupsSystem.shareToWhatsApp('${a}')">\n                <i class="fab fa-whatsapp"></i> WhatsApp\n                </button>\n                <button class="social-btn telegram" onclick="advancedGroupsSystem.shareToTelegram('${a}')">\n                <i class="fab fa-telegram"></i> Telegram\n                </button>\n                <button class="social-btn facebook" onclick="advancedGroupsSystem.shareToFacebook('${a}')">\n                <i class="fab fa-facebook"></i> Facebook\n                </button>\n                </div>\n                </div>\n              </div>\n            </div>\n            \x3c!-- Código QR --\x3e\n            <div class="invite-method" data-method="qr">\n              <div class="qr-generator">\n                <h4>Código QR</h4>\n                <p>Permite a las personas escanear y unirse instantáneamente</p>\n                <div class="qr-code">\n                <div class="qr-placeholder">\n                <i class="fas fa-qrcode"></i>\n                <p>Código QR del grupo</p>\n                </div>\n                </div>\n                <div class="qr-actions">\n                <button class="btn btn-primary" onclick="advancedGroupsSystem.downloadQR('${a}')">\n                <i class="fas fa-download"></i> Descargar QR\n                </button>\n                <button class="btn btn-secondary" onclick="advancedGroupsSystem.printQR('${a}')">\n                <i class="fas fa-print"></i> Imprimir\n                </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class="invite-summary">\n          <h4>Invitaciones Pendientes</h4>\n          <div class="pending-invites" id="pending-invites">\n            <p class="empty-state">No hay invitaciones pendientes</p>\n          </div>\n        </div>\n        <div class="action-buttons">\n          <button class="btn btn-primary" onclick="advancedGroupsSystem.sendInvitations('${a}')">\n            <i class="fas fa-paper-plane"></i> Enviar Invitaciones\n          </button>\n        </div>\n      </div>\n    `)}generateContactsList(){return[{name:"María González",phone:"+504 9988-7766",email:"maria@example.com",trusted:!0},{name:"Carlos Rodríguez",phone:"+504 8877-6655",email:"carlos@example.com",trusted:!0},{name:"Ana Morales",phone:"+504 7766-5544",email:"ana@example.com",trusted:!1},{name:"Luis Hernández",phone:"+504 6655-4433",email:"luis@example.com",trusted:!0},{name:"Sofia Martínez",phone:"+504 5544-3322",email:"sofia@example.com",trusted:!1}].map(a=>`\n      <div class="contact-item ${a.trusted?"trusted":""}">\n        <div class="contact-avatar">\n          ${a.name.charAt(0)}\n        </div>\n        <div class="contact-info">\n          <div class="contact-name">\n            ${a.name}\n            ${a.trusted?'<i class="fas fa-shield-alt trust-badge" title="Contacto de confianza"></i>':""}\n          </div>\n          <div class="contact-details">\n            <span>${a.phone}</span>\n            <span>${a.email}</span>\n          </div>\n        </div>\n        <div class="contact-actions">\n          <label class="checkbox-option">\n            <input type="checkbox" class="contact-checkbox" data-contact='${JSON.stringify(a)}'>\n            <span class="checkbox-custom"></span>\n          </label>\n        </div>\n      </div>\n    `).join("")}switchInviteMethod(a){document.querySelectorAll(".method-tab").forEach(a=>{a.classList.remove("active")}),document.querySelector(`.method-tab[onclick*="${a}"]`).classList.add("active"),document.querySelectorAll(".invite-method").forEach(a=>{a.classList.remove("active")}),document.querySelector(`.invite-method[data-method="${a}"]`).classList.add("active")}copyInviteLink(){document.getElementById("invite-link").select(),document.execCommand("copy"),this.showNotification("📋 Enlace copiado al portapapeles","success")}shareToWhatsApp(a){const e=this.groups.find(e=>e.id===a),n=`¡Te invito a unirte a mi grupo de tandas "${e.name}"! 🤝\n\nContribución: L. ${e.contribution.toLocaleString()}\nMiembros: ${e.maxMembers} máximo\n\nÚnete aquí: https://latanda.online/join/${a}`,t=`https://wa.me/?text=${encodeURIComponent(n)}`;window.open(t,"_blank")}shareToTelegram(a){const e=this.groups.find(e=>e.id===a),n=`¡Únete a mi grupo de tandas "${e.name}"! 💰\n\nContribución: L. ${e.contribution.toLocaleString()}\n\nhttps://latanda.online/join/${a}`,t=`https://t.me/share/url?url=https://latanda.online/join/${a}&text=${encodeURIComponent(n)}`;window.open(t,"_blank")}shareToFacebook(a){this.groups.find(e=>e.id===a);const e=`https://www.facebook.com/sharer/sharer.php?u=https://latanda.online/join/${a}`;window.open(e,"_blank")}sendInvitations(a){const e=[];document.querySelectorAll(".contact-checkbox:checked").forEach(a=>{const n=JSON.parse(a.dataset.contact);e.push(n)}),0!==e.length?(this.showNotification(`📧 Invitaciones enviadas a ${e.length} contactos`,"success"),this.closeModal()):this.showNotification("⚠️ Selecciona al menos un contacto","warning")}getGroupAvatar(a){return{family:"👨‍👩‍👧‍👦",business:"💼",community:"🏘️",professional:"👔",youth:"👥",women:"👩"}[a]||"👥"}generateTags(a,e){let n={family:["familiar","ahorro","familia"],business:["empresarial","negocios","comercio"],community:["comunitario","vecinos","local"],professional:["profesional","trabajo","carrera"],youth:["juventud","estudiantes","futuro"],women:["mujeres","empoderamiento","red"]}[a]||["general"];return e.toLowerCase().includes("norte")&&n.push("norte"),e.toLowerCase().includes("sur")&&n.push("sur"),n}getGroupTypeLabel(a){return{family:"Familiar",business:"Empresarial",community:"Comunitario",professional:"Profesional",youth:"Juvenil",women:"Mujeres"}[a]||a}getStatusLabel(a){return{active:"✅ Activo",completed:"🏆 Completado",recruiting:"📢 Reclutando",paused:"⏸️ Pausado",waiting:"⏳ Esperando"}[a]||a}createModal(a,e,n,t=!1){const s=document.getElementById(`modal-${a}`);s&&s.remove();const i=document.createElement("div");return i.id=`modal-${a}`,i.className="modal "+(t?"large":""),i.innerHTML=`\n      <div class="modal-overlay" onclick="advancedGroupsSystem.closeModal()"></div>\n      <div class="modal-content">\n        <div class="modal-header">\n          <h3>${e}</h3>\n          <button class="modal-close" onclick="advancedGroupsSystem.closeModal()">\n            <i class="fas fa-times"></i>\n          </button>\n        </div>\n        <div class="modal-body">\n          ${n}\n        </div>\n        <div class="modal-actions">\n          \x3c!-- Actions will be added dynamically --\x3e\n        </div>\n      </div>\n    `,document.body.appendChild(i),setTimeout(()=>i.classList.add("active"),10),i}closeModal(){const a=document.querySelector(".modal.active");a&&(a.classList.remove("active"),setTimeout(()=>a.remove(),300))}openKYC(){this.showModal({title:"🆔 Verificación KYC",content:'\n      <div class="kyc-verification-modal">\n        <div class="kyc-header">\n          <div class="kyc-icon">\n            <i class="fas fa-id-card"></i>\n          </div>\n          <h3>Verificación de Identidad KYC</h3>\n          <p class="kyc-subtitle">Aumenta tu nivel de seguridad y desbloquea funciones avanzadas</p>\n        </div>\n        <div class="kyc-benefits">\n          <div class="benefit-item">\n            <i class="fas fa-shield-alt text-success"></i>\n            <span>Aumenta tu seguridad al 95%+</span>\n          </div>\n          <div class="benefit-item">\n            <i class="fas fa-coins text-warning"></i>\n            <span>Límites de transacción más altos</span>\n          </div>\n          <div class="benefit-item">\n            <i class="fas fa-crown text-purple"></i>\n            <span>Acceso a funciones VIP</span>\n          </div>\n        </div>\n        <div class="kyc-steps">\n          <h4>📋 Documentos Requeridos:</h4>\n          <div class="document-checklist">\n            <div class="document-item">\n              <i class="fas fa-id-badge"></i>\n              <div>\n                <strong>Documento de Identidad</strong>\n                <p>Cédula de identidad o pasaporte válido</p>\n              </div>\n            </div>\n            <div class="document-item">\n              <i class="fas fa-file-invoice"></i>\n              <div>\n                <strong>Comprobante de Domicilio</strong>\n                <p>Recibo de servicios públicos (últimos 3 meses)</p>\n              </div>\n            </div>\n            <div class="document-item">\n              <i class="fas fa-camera"></i>\n              <div>\n                <strong>Selfie con Documento</strong>\n                <p>Foto clara sosteniendo tu documento de identidad</p>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class="kyc-actions">\n          <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n            <i class="fas fa-times"></i> Cancelar\n          </button>\n          <button class="btn btn-primary" onclick="advancedGroupsSystem.startKYCProcess()">\n            <i class="fas fa-upload"></i> Subir Documentos\n          </button>\n        </div>\n      </div>\n    ',size:"large"})}showAudit(){this.showModal({title:"🔍 Auditoría de Seguridad",content:'\n      <div class="security-audit-modal">\n        <div class="audit-header">\n          <div class="audit-icon">\n            <i class="fas fa-search-dollar"></i>\n          </div>\n          <h3>Auditoría de Seguridad Blockchain</h3>\n          <p class="audit-subtitle">Smart Contracts auditados por firmas de seguridad reconocidas</p>\n        </div>\n        <div class="audit-results">\n          <div class="audit-score">\n            <div class="score-circle-large">\n              <div class="score-value">98.2%</div>\n              <div class="score-label">Security Score</div>\n            </div>\n          </div>\n          <div class="audit-details">\n            <div class="audit-item passed">\n              <i class="fas fa-check-circle"></i>\n              <div class="audit-info">\n                <strong>Reentrancy Protection</strong>\n                <span class="audit-status">PASSED</span>\n                <p>Contratos protegidos contra ataques de reentrada</p>\n              </div>\n            </div>\n            <div class="audit-item passed">\n              <i class="fas fa-check-circle"></i>\n              <div class="audit-info">\n                <strong>Access Control</strong>\n                <span class="audit-status">PASSED</span>\n                <p>Permisos y roles implementados correctamente</p>\n              </div>\n            </div>\n            <div class="audit-item passed">\n              <i class="fas fa-check-circle"></i>\n              <div class="audit-info">\n                <strong>Integer Overflow</strong>\n                <span class="audit-status">PASSED</span>\n                <p>SafeMath implementado en todas las operaciones</p>\n              </div>\n            </div>\n            <div class="audit-item warning">\n              <i class="fas fa-exclamation-triangle"></i>\n              <div class="audit-info">\n                <strong>Gas Optimization</strong>\n                <span class="audit-status">MINOR</span>\n                <p>Optimizaciones menores recomendadas</p>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class="audit-firms">\n          <h4>🏛️ Auditado por:</h4>\n          <div class="firms-list">\n            <div class="firm-item">\n              <i class="fas fa-certificate"></i>\n              <span><strong>ConsenSys Diligence</strong> - Smart Contract Audit</span>\n            </div>\n            <div class="firm-item">\n              <i class="fas fa-certificate"></i>\n              <span><strong>OpenZeppelin</strong> - Security Review</span>\n            </div>\n            <div class="firm-item">\n              <i class="fas fa-certificate"></i>\n              <span><strong>Trail of Bits</strong> - Penetration Testing</span>\n            </div>\n          </div>\n        </div>\n        <div class="audit-actions">\n          <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n            <i class="fas fa-times"></i> Cerrar\n          </button>\n          <button class="btn btn-primary" onclick="advancedGroupsSystem.downloadAuditReport()">\n            <i class="fas fa-download"></i> Descargar Reporte\n          </button>\n        </div>\n      </div>\n    ',size:"large"})}startKYCProcess(){this.closeModal(),this.showNotification("Redirigiendo a la página de verificación KYC...","info"),setTimeout(()=>{this.showModal({title:"🆔 Verificación KYC",content:'\n        <div class="kyc-redirect-modal">\n          <div class="redirect-icon">\n            <i class="fas fa-external-link-alt"></i>\n          </div>\n          <h3>Redirección a KYC</h3>\n          <p>Te redirigiremos al módulo de verificación KYC donde podrás:</p>\n          <ul>\n            <li>📷 Subir fotos de tu documento</li>\n            <li>📄 Cargar comprobante de domicilio</li>\n            <li>🤳 Tomar selfie de verificación</li>\n            <li>⏱️ Completar verificación en 5-10 minutos</li>\n          </ul>\n          <div class="modal-actions">\n            <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n              <i class="fas fa-times"></i> Cancelar\n            </button>\n            <button class="btn btn-primary" onclick="advancedGroupsSystem.redirectToKYC()">\n              <i class="fas fa-arrow-right"></i> Continuar\n            </button>\n          </div>\n        </div>\n      ',size:"medium"})},1e3)}downloadAuditReport(){this.showNotification("Preparando reporte de auditoría para descarga...","info"),setTimeout(()=>{const a=`\nREPORTE DE AUDITORÍA DE SEGURIDAD\nLa Tanda Web3 Smart Contracts\n=====================================\n📅 Fecha: ${(new Date).toLocaleDateString()}\n🔒 Score de Seguridad: 98.2%\n🏛️ Auditado por: ConsenSys, OpenZeppelin, Trail of Bits\nRESULTADOS:\n✅ Reentrancy Protection: PASSED\n✅ Access Control: PASSED\n✅ Integer Overflow: PASSED\n⚠️ Gas Optimization: MINOR ISSUES\nDETALLES COMPLETOS:\nPara ver el reporte completo, visita:\nhttps://latanda.online/security-audit-report.pdf\n      `.trim(),e=new Blob([a],{type:"text/plain"}),n=window.URL.createObjectURL(e),t=document.createElement("a");t.href=n,t.download=`latanda-security-audit-${(new Date).getFullYear()}.txt`,document.body.appendChild(t),t.click(),document.body.removeChild(t),window.URL.revokeObjectURL(n),this.showNotification("Reporte de auditoría descargado exitosamente","success"),setTimeout(()=>{this.closeModal()},2e3)},1500)}redirectToKYC(){this.closeModal(),this.showNotification("Redirigiendo al sistema de verificación KYC...","info"),setTimeout(()=>{window.location.pathname.includes("groups-advanced-system")&&(document.querySelector('a[href*="kyc"]')?window.location.href="kyc-registration.html":this.showNotification("Módulo KYC próximamente disponible. Sistema en desarrollo.","warning"))},1500)}showNotification(a,e="info",n=5e3){try{a&&"string"==typeof a||(a="Mensaje no disponible");const t=document.createElement("div");t.className=`notification ${e}`;try{t.innerHTML=`\n          <div class="notification-content">\n            <i class="fas fa-${this.getNotificationIcon(e)}"></i>\n            <span>${a}</span>\n          </div>\n          <button onclick="this.parentElement.remove()" class="notification-close">\n            <i class="fas fa-times"></i>\n          </button>\n        `}catch(e){t.textContent=a,t.style.padding="10px",t.style.background="#333",t.style.color="white",t.style.borderRadius="5px"}let s=document.querySelector(".notifications-container");if(!s)try{s=document.createElement("div"),s.className="notifications-container",document.body.appendChild(s)}catch(e){return void alert(a)}try{s.appendChild(t),setTimeout(()=>{try{t.parentElement&&t.remove()}catch(a){}},n)}catch(e){alert(a)}}catch(e){try{alert(a||"Error en el sistema")}catch(a){}}}getNotificationIcon(a){return{success:"check-circle",error:"exclamation-triangle",warning:"exclamation-circle",info:"info-circle"}[a]||"info-circle"}handleStatCardClick(a){const e=a.getAttribute("data-action"),n=a.getAttribute("data-target"),t=a.getAttribute("data-filter");switch(e){case"navigate":this.navigateFromStat(n,t);break;case"modal":this.showStatModal(n)}}navigateFromStat(a,e=null){this.switchTab(a),e&&setTimeout(()=>{},100);const n={groups:"Mis Grupos",tandas:"Gestión de Tandas",matching:"Matching Inteligente",analytics:"Analíticas"}[a]||a;this.showNotification(`Navegando a ${n}${e?` (${e})`:""}`,"info")}showStatModal(a){switch(a){case"financial-details":this.showFinancialDetailsModal();break;case"reputation-details":this.showReputationDetailsModal()}}showFinancialDetailsModal(){this.createModal("financial-details","💰 Detalles Financieros",'\n      <div class="financial-details-container">\n        <div class="financial-summary-grid">\n          <div class="financial-card">\n            <div class="financial-icon"><i class="fas fa-piggy-bank"></i></div>\n            <div class="financial-info">\n              <div class="financial-value">L. 24,500</div>\n              <div class="financial-label">Total Ahorrado</div>\n            </div>\n          </div>\n          <div class="financial-card">\n            <div class="financial-icon"><i class="fas fa-calendar-check"></i></div>\n            <div class="financial-info">\n              <div class="financial-value">L. 3,200</div>\n              <div class="financial-label">Próximo Cobro</div>\n            </div>\n          </div>\n          <div class="financial-card">\n            <div class="financial-icon"><i class="fas fa-chart-line"></i></div>\n            <div class="financial-info">\n              <div class="financial-value">+15%</div>\n              <div class="financial-label">Crecimiento Mensual</div>\n            </div>\n          </div>\n        </div>\n        <div class="financial-breakdown">\n          <h4><i class="fas fa-list"></i> Desglose por Grupo</h4>\n          <div class="breakdown-list">\n            <div class="breakdown-item">\n              <div class="breakdown-info">\n                <span class="breakdown-group">Cooperativa Familiar</span>\n                <span class="breakdown-amount">L. 12,000</span>\n              </div>\n              <div class="breakdown-progress">\n                <div class="progress-bar" style="width: 75%"></div>\n              </div>\n            </div>\n            <div class="breakdown-item">\n              <div class="breakdown-info">\n                <span class="breakdown-group">Tanda Profesionales</span>\n                <span class="breakdown-amount">L. 8,500</span>\n              </div>\n              <div class="breakdown-progress">\n                <div class="progress-bar" style="width: 60%"></div>\n              </div>\n            </div>\n            <div class="breakdown-item">\n              <div class="breakdown-info">\n                <span class="breakdown-group">Grupo Comunitario</span>\n                <span class="breakdown-amount">L. 4,000</span>\n              </div>\n              <div class="breakdown-progress">\n                <div class="progress-bar" style="width: 40%"></div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class="financial-projections">\n          <h4><i class="fas fa-crystal-ball"></i> Proyecciones</h4>\n          <div class="projection-grid">\n            <div class="projection-item">\n              <span class="projection-period">3 meses</span>\n              <span class="projection-amount">L. 32,500</span>\n            </div>\n            <div class="projection-item">\n              <span class="projection-period">6 meses</span>\n              <span class="projection-amount">L. 45,200</span>\n            </div>\n            <div class="projection-item">\n              <span class="projection-period">1 año</span>\n              <span class="projection-amount">L. 78,000</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    ').querySelector(".modal-actions").innerHTML='\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cerrar\n      </button>\n      <button class="btn btn-primary" onclick="advancedGroupsSystem.downloadFinancialReport()">\n        <i class="fas fa-download"></i> Descargar Reporte\n      </button>\n    '}showReputationDetailsModal(){this.createModal("reputation-details","🛡️ Score de Confianza",'\n      <div class="reputation-details-container">\n        <div class="reputation-score-display">\n          <div class="score-circle">\n            <div class="score-value">94%</div>\n            <div class="score-label">Excelente</div>\n          </div>\n          <div class="score-breakdown">\n            <div class="score-factor">\n              <span class="factor-name">Puntualidad en Pagos</span>\n              <div class="factor-bar">\n                <div class="factor-progress" style="width: 98%"></div>\n                <span class="factor-score">98%</span>\n              </div>\n            </div>\n            <div class="score-factor">\n              <span class="factor-name">Participación Activa</span>\n              <div class="factor-bar">\n                <div class="factor-progress" style="width: 95%"></div>\n                <span class="factor-score">95%</span>\n              </div>\n            </div>\n            <div class="score-factor">\n              <span class="factor-name">Colaboración</span>\n              <div class="factor-bar">\n                <div class="factor-progress" style="width: 88%"></div>\n                <span class="factor-score">88%</span>\n              </div>\n            </div>\n            <div class="score-factor">\n              <span class="factor-name">Recomendaciones</span>\n              <div class="factor-bar">\n                <div class="factor-progress" style="width: 92%"></div>\n                <span class="factor-score">92%</span>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class="reputation-history">\n          <h4><i class="fas fa-history"></i> Historial de Confianza</h4>\n          <div class="history-timeline">\n            <div class="history-item positive">\n              <div class="history-icon"><i class="fas fa-check-circle"></i></div>\n              <div class="history-content">\n                <span class="history-action">Pago puntual completado</span>\n                <span class="history-date">Hace 3 días</span>\n              </div>\n              <span class="history-points">+2 puntos</span>\n            </div>\n            <div class="history-item positive">\n              <div class="history-icon"><i class="fas fa-users"></i></div>\n              <div class="history-content">\n                <span class="history-action">Nuevo miembro referido</span>\n                <span class="history-date">Hace 1 semana</span>\n              </div>\n              <span class="history-points">+5 puntos</span>\n            </div>\n            <div class="history-item positive">\n              <div class="history-icon"><i class="fas fa-trophy"></i></div>\n              <div class="history-content">\n                <span class="history-action">Tanda completada exitosamente</span>\n                <span class="history-date">Hace 2 semanas</span>\n              </div>\n              <span class="history-points">+10 puntos</span>\n            </div>\n          </div>\n        </div>\n        <div class="reputation-tips">\n          <h4><i class="fas fa-lightbulb"></i> Consejos para Mejorar</h4>\n          <div class="tips-list">\n            <div class="tip-item">\n              <i class="fas fa-clock"></i>\n              <span>Mantén puntualidad en todos los pagos</span>\n            </div>\n            <div class="tip-item">\n              <i class="fas fa-handshake"></i>\n              <span>Refiere nuevos miembros confiables</span>\n            </div>\n            <div class="tip-item">\n              <i class="fas fa-comments"></i>\n              <span>Participa activamente en las reuniones</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    ').querySelector(".modal-actions").innerHTML='\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cerrar\n      </button>\n    '}getTabDisplayName(a){return{groups:"Mis Grupos",tandas:"Gestión de Tandas",matching:"Matching Inteligente",analytics:"Analíticas y Reportes"}[a]||a}applyFilter(a,e){"groups"===a&&"active"===e&&document.querySelectorAll(".group-card").forEach(a=>{const e=a.querySelector(".status")?.textContent?.toLowerCase();e&&e.includes("activo")?a.style.display="block":a.style.display="none"})}downloadFinancialReport(){const a=this.generateFinancialReport();this.downloadFile(a,"reporte-financiero-latanda.pdf","application/pdf"),this.showNotification("success","Reporte financiero descargado exitosamente"),this.closeModal()}generateFinancialReport(){return"Reporte Financiero La Tanda - "+(new Date).toLocaleDateString()}getTandaStatusIcon(a){return{active:"play-circle",completed:"check-circle",upcoming:"clock"}[a]||"info-circle"}getTandaPrimaryAction(a){switch(a.status){case"active":return a.paymentsPending>0?{label:"Gestionar Pagos",icon:"exclamation-triangle",class:"urgent",onclick:`advancedGroupsSystem.managePendingPayments('${a.id}')`,disabled:!1}:{label:"Registrar Pago",icon:"money-bill-wave",class:"success",onclick:`advancedGroupsSystem.recordTandaPayment('${a.id}')`,disabled:!1};case"upcoming":return{label:"Iniciar Tanda",icon:"play",class:"primary",onclick:`advancedGroupsSystem.startTanda('${a.id}')`,disabled:!1};case"completed":return{label:"Ver Resumen",icon:"chart-bar",class:"info",onclick:`advancedGroupsSystem.viewTandaSummary('${a.id}')`,disabled:!1};default:return{label:"Ver Detalles",icon:"eye",class:"secondary",onclick:`advancedGroupsSystem.viewTandaDetails('${a.id}')`,disabled:!1}}}renderProgressStatus(a){switch(a.status){case"active":return'<span class="status-active">🟢 En Progreso</span>';case"completed":return'<span class="status-completed">✅ Completada</span>';case"upcoming":return'<span class="status-upcoming">🕒 Próximamente</span>';default:return'<span class="status-unknown">❓ Estado Desconocido</span>'}}renderProgressSteps(a){let e="";for(let n=1;n<=a.totalRounds;n++)e+=`<div class="progress-step ${n<=a.currentRound?"completed":n===a.currentRound+1?"current":"pending"}" data-round="${n}"></div>`;return e}renderCriticalInfo(a,e){return"active"===a.status?a.paymentsPending>0?`\n          <div class="critical-alert urgent">\n            <i class="fas fa-exclamation-triangle"></i>\n            <span>${a.paymentsPending} pago${a.paymentsPending>1?"s":""} pendiente${a.paymentsPending>1?"s":""}</span>\n          </div>`:`\n        <div class="critical-info normal">\n          <div class="info-item">\n            <i class="fas fa-user"></i>\n            <span>Próximo: ${a.nextBeneficiary}</span>\n          </div>\n          <div class="info-item">\n            <i class="fas fa-calendar"></i>\n            <span>${e>=0?`En ${e} días`:`Hace ${Math.abs(e)} días`}</span>\n          </div>\n        </div>`:"upcoming"===a.status?`\n        <div class="critical-info upcoming">\n          <i class="fas fa-rocket"></i>\n          <span>Inicia en ${this.calculateDaysToStart(a)} días</span>\n        </div>`:"completed"===a.status?`\n        <div class="critical-info completed">\n          <i class="fas fa-trophy"></i>\n          <span>Tanda exitosa • ${a.participants} participantes</span>\n        </div>`:""}renderExpandedDetails(a){return`\n      <div class="expanded-details-grid">\n        <div class="detail-row">\n          <span class="detail-label">💰 Total acumulado:</span>\n          <span class="detail-value">L. ${a.totalAmount.toLocaleString()}</span>\n        </div>\n        <div class="detail-row">\n          <span class="detail-label">👥 Participantes:</span>\n          <span class="detail-value">${a.participants} miembros</span>\n        </div>\n        <div class="detail-row">\n          <span class="detail-label">📅 Frecuencia:</span>\n          <span class="detail-value">${this.getFrequencyLabel(a.paymentFrequency)}</span>\n        </div>\n        ${"active"===a.status?`\n        <div class="detail-row">\n          <span class="detail-label">📋 Próximo pago:</span>\n          <span class="detail-value">${new Date(a.nextPaymentDate).toLocaleDateString("es-HN")}</span>\n        </div>\n        `:""}\n      </div>\n    `}renderTandaActionMenu(a){const e=[{icon:"edit",label:"Editar",onclick:`advancedGroupsSystem.editTanda('${a.id}')`},{icon:"share",label:"Compartir",onclick:`advancedGroupsSystem.shareTanda('${a.id}')`},{icon:"copy",label:"Duplicar",onclick:`advancedGroupsSystem.duplicateTanda('${a.id}')`}];return"active"===a.status&&e.push({icon:"bell",label:"Recordatorios",onclick:`advancedGroupsSystem.sendPaymentReminders('${a.id}')`},{icon:"pause",label:"Pausar",onclick:`advancedGroupsSystem.pauseTanda('${a.id}')`,class:"warning"}),"completed"!==a.status&&e.push({separator:!0},{icon:"archive",label:"Archivar",onclick:`advancedGroupsSystem.archiveTanda('${a.id}')`,class:"warning"},{icon:"times",label:"Cancelar",onclick:`advancedGroupsSystem.cancelTanda('${a.id}')`,class:"danger"}),e.map(a=>a.separator?'<div class="menu-separator"></div>':`\n        <div class="menu-item ${a.class||""}" onclick="${a.onclick}">\n          <i class="fas fa-${a.icon}"></i>\n          <span>${a.label}</span>\n        </div>`).join("")}calculateDaysToNext(a){if(!a.nextPaymentDate)return 0;const e=new Date,n=new Date(a.nextPaymentDate).getTime()-e.getTime();return Math.ceil(n/864e5)}calculateDaysToStart(a){if(!a.startDate)return 0;const e=new Date,n=new Date(a.startDate).getTime()-e.getTime();return Math.ceil(n/864e5)}getFrequencyLabel(a){return{weekly:"Semanal",biweekly:"Quincenal",monthly:"Mensual"}[a]||a}toggleTandaDetails(a){const e=document.querySelector(`[data-tanda-id="${a}"]`),n=e?.querySelector(".tanda-expandable-details"),t=n?.querySelector(".details-trigger i");if(n){const a="true"===n.getAttribute("data-expanded"),e=!a;n.setAttribute("data-expanded",e.toString()),t&&(t.style.transform=a?"rotate(0deg)":"rotate(180deg)")}}toggleTandaActionsMenu(a){document.querySelectorAll(".dropdown-menu-enhanced").forEach(e=>{e.getAttribute("data-tanda")!==a&&e.classList.remove("show")});const e=document.querySelector(`.dropdown-menu-enhanced[data-tanda="${a}"]`);e&&e.classList.toggle("show")}addMobileTouchSupport(a){a.forEach(a=>{const e=a.getAttribute("data-tanda-id");a.addEventListener("touchstart",e=>{a.style.transform="scale(0.98)"}),a.addEventListener("touchend",e=>{a.style.transform=""});const n=a.querySelector(".dropdown-trigger");let t,s;n&&n.addEventListener("touchstart",a=>{a.stopPropagation()}),a.addEventListener("touchstart",a=>{t=a.touches[0].clientX,s=a.touches[0].clientY}),a.addEventListener("touchend",a=>{if(!t||!s)return;const n=a.changedTouches[0].clientX,i=a.changedTouches[0].clientY,o=n-t,r=i-s;Math.abs(o)>Math.abs(r)&&Math.abs(o)>50&&(o>0?this.triggerPrimaryAction(e):this.toggleTandaActionsMenu(e)),t=null,s=null})}),document.addEventListener("touchstart",a=>{a.target.closest(".dropdown-enhanced")||document.querySelectorAll(".dropdown-menu-enhanced.show").forEach(a=>{a.classList.remove("show")})})}triggerPrimaryAction(a){const e=document.querySelector(`[data-tanda-id="${a}"]`),n=e?.querySelector(".btn-primary-action");n&&(n.click(),n.style.transform="scale(1.1)",setTimeout(()=>{n.style.transform=""},150))}filterTandasByStatus(a){try{this.updateFilterButtons("status",a);const e=document.getElementById("group-filter"),n=e?e.value:"";this.applyTandasFilters(a,n),this.updateURLParams({status:"all"===a?null:a}),this.showNotification("success",`Filtro aplicado: ${this.getStatusFilterLabel(a)}`)}catch(a){this.showNotification("error","Error al aplicar filtro: "+a.message)}}filterTandasByGroup(a){const e=this.getCurrentStatusFilter();this.applyTandasFilters(e,a),this.updateURLParams({group:a||null});const n=a?this.getGroupName(a):"Todos los grupos";this.showNotification("success",`Grupo seleccionado: ${n}`)}applyTandasFilters(a,e){const n=this.getAllTandasData();let t=this.filterTandasByStatusLogic(n,a);e&&(t.length,t=t.filter(a=>a.groupId===e)),this.renderFilteredTandas(t,a,e);const s=this.calculateTandasStats(t);this.updateTandasStats(s)}filterTandasByStatusLogic(a,e){switch(e){case"all":default:return a;case"active":return a.filter(a=>"active"===a.status);case"pending-payments":return a.filter(a=>"active"===a.status&&a.paymentsPending>0);case"completed":return a.filter(a=>"completed"===a.status);case"upcoming":return a.filter(a=>"upcoming"===a.status)}}renderFilteredTandas(a,e,n){const t=document.querySelector(".tandas-grid");t&&(0!==a.length?(t.innerHTML=a.map((a,e)=>this.renderTandaCard(a)).join(""),setTimeout(()=>{const a=document.querySelectorAll(".tanda-card-v2");this.addMobileTouchSupport(a)},100)):t.innerHTML=this.renderEmptyFilterState(e,n))}renderEmptyFilterState(a,e){const n=this.getStatusFilterLabel(a),t=e?this.getGroupName(e):null;let s="No se encontraron tandas";return"all"!==a&&t?s+=` con estado "${n}" en el grupo "${t}"`:"all"!==a?s+=` con estado "${n}"`:t&&(s+=` en el grupo "${t}"`),`\n      <div class="empty-filter-state">\n        <div class="empty-icon">\n          <i class="fas fa-filter"></i>\n        </div>\n        <h3>Sin resultados</h3>\n        <p>${s}</p>\n        <div class="empty-actions">\n          <button class="btn btn-secondary" onclick="advancedGroupsSystem.clearTandasFilters()">\n            <i class="fas fa-times"></i> Limpiar filtros\n          </button>\n          <button class="btn btn-primary" onclick="advancedGroupsSystem.showCreateTandaModal()">\n            <i class="fas fa-plus"></i> Nueva Tanda\n          </button>\n        </div>\n      </div>\n    `}clearTandasFilters(){this.updateFilterButtons("status","all");const a=document.getElementById("group-filter");a&&(a.value=""),this.loadTandasContent(),this.updateURLParams({status:null,group:null}),this.showNotification("success","Filtros eliminados - mostrando todas las tandas")}updateFilterButtons(a,e){document.querySelectorAll("[data-filter]").forEach(a=>{a.getAttribute("data-filter")===e?a.classList.add("active"):a.classList.remove("active")})}getCurrentStatusFilter(){const a=document.querySelector(".filter-btn.active[data-filter]");return a?a.getAttribute("data-filter"):"all"}getStatusFilterLabel(a){return{all:"Todas",active:"Activas","pending-payments":"Con Pagos Pendientes",completed:"Completadas",upcoming:"Próximamente"}[a]||a}getGroupName(a){const e=this.groups.find(e=>e.id===a);return e?`${e.avatar} ${e.name}`:"Grupo desconocido"}getAllTandasData(){return[{id:"tanda_1",name:"Tanda Enero 2025",groupId:"group_1",groupName:"Cooperativa Familiar",groupAvatar:"👨‍👩‍👧‍👦",status:"active",progress:75,currentRound:3,totalRounds:4,roundAmount:6e3,totalAmount:24e3,nextPaymentDate:"2025-01-15",nextBeneficiary:"María Rodriguez",paymentsPending:2,participants:4,paymentFrequency:"monthly"},{id:"tanda_2",name:"Tanda Profesionales Q4",groupId:"group_2",groupName:"Red Profesional TGU",groupAvatar:"👔",status:"active",progress:50,currentRound:2,totalRounds:4,roundAmount:12e3,totalAmount:48e3,nextPaymentDate:"2025-01-20",nextBeneficiary:"Carlos López",paymentsPending:1,participants:4,paymentFrequency:"monthly"},{id:"tanda_3",name:"Tanda Comunitaria Diciembre",groupId:"group_3",groupName:"Grupo Comunitario",groupAvatar:"🏘️",status:"completed",progress:100,currentRound:6,totalRounds:6,roundAmount:3e3,totalAmount:18e3,completedDate:"2024-12-30",participants:6,paymentFrequency:"biweekly"},{id:"tanda_4",name:"Tanda Familiar Febrero",groupId:"group_1",groupName:"Cooperativa Familiar",groupAvatar:"👨‍👩‍👧‍👦",status:"upcoming",progress:0,currentRound:0,totalRounds:4,roundAmount:6e3,totalAmount:24e3,startDate:"2025-02-01",participants:4,paymentFrequency:"monthly"},{id:"tanda_5",name:"Tanda Express Semanal",groupId:"group_4",groupName:"Emprendedores Unidos",groupAvatar:"💼",status:"active",progress:25,currentRound:1,totalRounds:4,roundAmount:4e3,totalAmount:16e3,nextPaymentDate:"2025-01-12",nextBeneficiary:"Ana García",paymentsPending:3,participants:4,paymentFrequency:"weekly"}]}updateTandasStats(a){const e=document.querySelector(".tandas-stats");e&&a&&(e.innerHTML=this.renderTandasStats(a))}updateURLParams(a){const e=new URL(window.location);Object.entries(a).forEach(([a,n])=>{n?e.searchParams.set(a,n):e.searchParams.delete(a)}),window.history.replaceState({},"",e)}managePendingPayments(a){const e=this.getAllTandasData().find(e=>e.id===a);if(!e)return void this.showNotification("error","Tanda no encontrada");const n=this.getPendingPaymentsForTanda(a),t=this.getAllParticipantsForTanda(a),s=t.filter(a=>"paid"===a.status),i=n.filter(a=>a.isOverdue),o=this.createModal("manage-payments",`💰 Gestionar Pagos - ${e.name}`,`\n      <div class="payments-management-container">\n        <div class="tanda-payment-header">\n          <div class="tanda-info-summary">\n            <div class="tanda-avatar">${e.groupAvatar}</div>\n            <div class="tanda-details">\n              <h3>${e.name}</h3>\n              <p>${e.groupName}</p>\n              <div class="payment-cycle-info">\n                <span class="cycle-current">Ronda ${e.currentRound}/${e.totalRounds}</span>\n                <span class="amount-info">L. ${e.roundAmount.toLocaleString()} por participante</span>\n              </div>\n            </div>\n          </div>\n          <div class="payments-stats">\n            <div class="stat-card success">\n              <div class="stat-value">${s.length}</div>\n              <div class="stat-label">Ya Pagaron</div>\n            </div>\n            <div class="stat-card ${n.length>0?"warning":"success"}">\n              <div class="stat-value">${n.length}</div>\n              <div class="stat-label">Pendientes</div>\n            </div>\n            <div class="stat-card ${i.length>0?"urgent":"neutral"}">\n              <div class="stat-value">${i.length}</div>\n              <div class="stat-label">Vencidos</div>\n            </div>\n            <div class="stat-card">\n              <div class="stat-value">L. ${(n.length*e.roundAmount).toLocaleString()}</div>\n              <div class="stat-label">Monto Pendiente</div>\n            </div>\n          </div>\n        </div>\n        \x3c!-- Payment View Toggle --\x3e\n        <div class="payment-view-controls">\n          <div class="view-toggle-buttons">\n            <button class="btn btn-sm view-toggle active" data-view="pending" onclick="advancedGroupsSystem.switchPaymentView('pending', '${a}')">\n              <i class="fas fa-exclamation-triangle"></i> Solo Pendientes (${n.length})\n            </button>\n            <button class="btn btn-sm view-toggle" data-view="all" onclick="advancedGroupsSystem.switchPaymentView('all', '${a}')">\n              <i class="fas fa-users"></i> Todos los Participantes (${t.length})\n            </button>\n            <button class="btn btn-sm view-toggle" data-view="paid" onclick="advancedGroupsSystem.switchPaymentView('paid', '${a}')">\n              <i class="fas fa-check-circle"></i> Solo Pagados (${s.length})\n            </button>\n          </div>\n          <div class="payment-filters">\n            <select class="form-select form-select-sm" id="riskLevelFilter" onchange="advancedGroupsSystem.filterByRiskLevel(this.value)">\n              <option value="">Todos los Niveles</option>\n              <option value="low">🟢 Bajo Riesgo</option>\n              <option value="medium">🟡 Riesgo Medio</option>\n              <option value="high">🟠 Alto Riesgo</option>\n              <option value="critical">🔴 Crítico</option>\n            </select>\n          </div>\n        </div>\n        \x3c!-- Dynamic Participants List --\x3e\n        <div class="participants-list-container" id="participants-list-container">\n          ${this.renderParticipantsList(n,"pending",a)}\n        </div>\n        <div class="bulk-payment-actions">\n          <h4><i class="fas fa-tasks"></i> Acciones Masivas</h4>\n          <div class="bulk-actions-grid">\n            <button class="btn btn-info" onclick="advancedGroupsSystem.sendBulkReminders('${a}')">\n              <i class="fas fa-megaphone"></i> Enviar Recordatorios a Todos\n            </button>\n            <button class="btn btn-warning" onclick="advancedGroupsSystem.generatePaymentReport('${a}')">\n              <i class="fas fa-file-alt"></i> Generar Reporte\n            </button>\n            <button class="btn btn-primary" onclick="advancedGroupsSystem.scheduleAutomaticReminders('${a}')">\n              <i class="fas fa-robot"></i> Programar Recordatorios\n            </button>\n          </div>\n        </div>\n        <div class="payment-history-section">\n          <h4><i class="fas fa-history"></i> Historial de Pagos Recientes</h4>\n          <div class="recent-payments">\n            ${this.getRecentPayments(a).map(a=>`\n              <div class="payment-history-item">\n                <div class="payment-participant">\n                <i class="fas fa-user"></i>\n                ${a.participantName}\n                </div>\n                <div class="payment-amount">L. ${a.amount.toLocaleString()}</div>\n                <div class="payment-date">${a.date}</div>\n                <div class="payment-method">\n                <i class="fas fa-${"cash"===a.method?"money-bill":"transfer"===a.method?"university":"mobile-alt"}"></i>\n                ${a.methodLabel}\n                </div>\n              </div>\n            `).join("")}\n          </div>\n        </div>\n      </div>\n    `,!0);o.style.maxWidth="900px",o.style.width="95%",o.querySelector(".modal-actions").innerHTML=`\n      <button class="btn btn-primary" onclick="advancedGroupsSystem.refreshPaymentStatus('${a}')">\n        <i class="fas fa-sync"></i> Actualizar Estado\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cerrar\n      </button>\n    `,this.showNotification("success","Gestión de pagos cargada exitosamente")}renderParticipantsList(a,e,n){let t,s,i;switch(e){case"pending":t="Participantes con Pagos Pendientes",s="exclamation-triangle text-warning",i="¡Excelente! Todos los participantes han pagado.";break;case"paid":t="Participantes que Ya Pagaron",s="check-circle text-success",i="Aún no hay pagos registrados para esta ronda.";break;case"all":t="Todos los Participantes",s="users",i="No hay participantes en esta tanda."}return 0===a.length?`\n        <div class="participants-section">\n          <h4><i class="fas ${s}"></i> ${t}</h4>\n          <div class="empty-participants-state">\n            <div class="empty-icon">\n              <i class="fas fa-check-circle"></i>\n            </div>\n            <h5>${i}</h5>\n          </div>\n        </div>\n      `:`\n      <div class="participants-section">\n        <h4><i class="fas ${s}"></i> ${t} (${a.length})</h4>\n        ${a.map(a=>"pending"===e||"all"===e&&"pending"===a.status?this.renderPendingParticipant(a,n):this.renderPaidParticipant(a)).join("")}\n      </div>\n    `}renderPendingParticipant(a,e){return`\n      <div class="payment-item ${a.isOverdue?"overdue":""} risk-${a.riskLevel}"\n        data-payment-id="${a.id}" data-risk="${a.riskLevel}">\n        <div class="participant-info">\n          <div class="participant-avatar">\n            ${a.avatar||'<i class="fas fa-user"></i>'}\n          </div>\n          <div class="participant-details">\n            <div class="participant-header">\n              <h5>${a.participantName}</h5>\n              <span class="risk-badge risk-${a.riskLevel}">\n                ${{low:"🟢 Bajo",medium:"🟡 Medio",high:"🟠 Alto",critical:"🔴 Crítico"}[a.riskLevel]} Riesgo\n              </span>\n            </div>\n            <p class="payment-status ${a.isOverdue?"overdue":"pending"}">\n              <i class="fas fa-clock"></i>\n              ${a.isOverdue?"Vencido":"Pendiente"}\n              ${a.daysOverdue>0?` (${a.daysOverdue} días)`:""}\n              ${a.escalated?' • <span class="escalated">Escalado</span>':""}\n            </p>\n            <div class="contact-info">\n              <span><i class="fas fa-phone"></i> ${a.phone}</span>\n              ${a.email?`<span><i class="fas fa-envelope"></i> ${a.email}</span>`:""}\n            </div>\n            ${a.notes?`\n            <div class="payment-notes">\n              <i class="fas fa-sticky-note"></i>\n              <span>${a.notes}</span>\n            </div>\n            `:""}\n            ${a.lastReminder?`\n            <div class="last-reminder">\n              <i class="fas fa-bell"></i>\n              <span>Último recordatorio: ${a.lastReminder}</span>\n            </div>\n            `:""}\n          </div>\n        </div>\n        <div class="payment-amount">\n          <div class="amount-display">\n            <span class="currency">L.</span>\n            <span class="amount">${a.amount.toLocaleString()}</span>\n          </div>\n          <div class="due-date ${a.isOverdue?"overdue":""}">\n            ${a.isOverdue?"Vencido:":"Vence:"} ${a.dueDate}\n          </div>\n        </div>\n        <div class="payment-actions">\n          <button class="btn btn-success btn-sm" onclick="advancedGroupsSystem.markPaymentReceived('${a.id}', '${e}')">\n            <i class="fas fa-check"></i> Marcar Pagado\n          </button>\n          <button class="btn btn-info btn-sm" onclick="advancedGroupsSystem.sendPaymentReminder('${a.id}', '${e}')">\n            <i class="fas fa-bell"></i> Recordar\n          </button>\n          <div class="dropdown">\n            <button class="btn btn-secondary btn-sm dropdown-toggle" onclick="advancedGroupsSystem.togglePaymentActions('${a.id}')">\n              <i class="fas fa-ellipsis-v"></i>\n            </button>\n            <div class="dropdown-menu" id="payment-actions-${a.id}">\n              <a href="#" onclick="advancedGroupsSystem.contactParticipant('${a.id}')">\n                <i class="fas fa-phone"></i> Contactar Directamente\n              </a>\n              <a href="#" onclick="advancedGroupsSystem.viewParticipantHistory('${a.id}')">\n                <i class="fas fa-history"></i> Ver Historial\n              </a>\n              <a href="#" onclick="advancedGroupsSystem.extendPaymentDeadline('${a.id}')">\n                <i class="fas fa-calendar-plus"></i> Extender Plazo\n              </a>\n              <a href="#" onclick="advancedGroupsSystem.addPaymentNote('${a.id}')" class="text-info">\n                <i class="fas fa-sticky-note"></i> Agregar Nota\n              </a>\n              <a href="#" onclick="advancedGroupsSystem.applyLateFee('${a.id}')" class="text-warning">\n                <i class="fas fa-exclamation-triangle"></i> Aplicar Mora\n              </a>\n              ${a.isOverdue?`\n              <div class="dropdown-divider"></div>\n              <a href="#" onclick="advancedGroupsSystem.escalatePayment('${a.id}')" class="text-danger">\n                <i class="fas fa-gavel"></i> Escalar Caso\n              </a>\n              `:""}\n            </div>\n          </div>\n        </div>\n      </div>\n    `}renderPaidParticipant(a){return`\n      <div class="payment-item paid" data-participant-id="${a.id}">\n        <div class="participant-info">\n          <div class="participant-avatar">\n            ${a.avatar||'<i class="fas fa-user"></i>'}\n          </div>\n          <div class="participant-details">\n            <div class="participant-header">\n              <h5>${a.name}</h5>\n              <span class="status-badge success">\n                <i class="fas fa-check-circle"></i> Pagado\n              </span>\n            </div>\n            <p class="payment-status paid">\n              <i class="fas fa-check"></i>\n              Pagó el ${a.paidDate}\n            </p>\n            <div class="contact-info">\n              <span><i class="fas fa-phone"></i> ${a.phone}</span>\n              ${a.email?`<span><i class="fas fa-envelope"></i> ${a.email}</span>`:""}\n            </div>\n            <div class="payment-method-info">\n              <i class="fas fa-${"cash"===a.paymentMethod?"money-bill":"transfer"===a.paymentMethod?"university":"mobile-alt"}"></i>\n              <span>Método: ${"cash"===a.paymentMethod?"Efectivo":"transfer"===a.paymentMethod?"Transferencia":"Pago Móvil"}</span>\n            </div>\n          </div>\n        </div>\n        <div class="payment-amount">\n          <div class="amount-display success">\n            <span class="currency">L.</span>\n            <span class="amount">${a.amount.toLocaleString()}</span>\n          </div>\n          <div class="paid-date">\n            <i class="fas fa-check-circle"></i>\n            Completado\n          </div>\n        </div>\n        <div class="payment-actions">\n          <button class="btn btn-outline-info btn-sm" onclick="advancedGroupsSystem.viewPaymentDetails('${a.id}')">\n            <i class="fas fa-eye"></i> Ver Detalles\n          </button>\n          <button class="btn btn-outline-secondary btn-sm" onclick="advancedGroupsSystem.sendPaymentConfirmation('${a.id}')">\n            <i class="fas fa-receipt"></i> Comprobante\n          </button>\n        </div>\n      </div>\n    `}switchPaymentView(a,e){document.querySelectorAll(".view-toggle").forEach(a=>a.classList.remove("active")),document.querySelector(`[data-view="${a}"]`).classList.add("active");const n=this.getAllParticipantsForTanda(e),t=document.getElementById("participants-list-container");let s;switch(a){case"pending":s=this.getPendingPaymentsForTanda(e);break;case"paid":s=n.filter(a=>"paid"===a.status);break;default:s=n}t.innerHTML=this.renderParticipantsList(s,a,e),this.showNotification("info",`Vista cambiada: ${this.getViewTypeLabel(a)}`)}getViewTypeLabel(a){return{pending:"Solo Pendientes",paid:"Solo Pagados",all:"Todos los Participantes"}[a]||"Vista desconocida"}filterByRiskLevel(a){document.querySelectorAll(".payment-item").forEach(e=>{a&&e.dataset.risk!==a?e.style.display="none":e.style.display="flex"});const e=document.querySelectorAll('.payment-item[style="display: flex;"], .payment-item:not([style*="display: none"])').length;this.showNotification("info",`Filtro aplicado: ${e} participantes visibles`)}viewParticipantHistory(a){this.showNotification("info","Cargando historial del participante...")}addPaymentNote(a){this.showNotification("info","Abriendo editor de notas...")}viewPaymentDetails(a){this.showNotification("info","Mostrando detalles del pago...")}sendPaymentConfirmation(a){this.showNotification("success","Comprobante de pago enviado")}getPendingPaymentsForTanda(a){return[{id:"payment_1",participantName:"María Rodriguez",phone:"+504 9876-5432",email:"maria.rodriguez@email.com",isOverdue:!0,daysOverdue:3,dueDate:"2025-01-12",status:"pending",amount:6e3,lastReminder:"2025-01-10",paymentMethod:null,notes:"Prometió pagar este fin de semana",riskLevel:"high",participantId:"part_1",avatar:"👩‍💼"},{id:"payment_2",participantName:"Carlos López",phone:"+504 8765-4321",email:null,isOverdue:!1,daysOverdue:0,dueDate:"2025-01-15",status:"pending",amount:6e3,lastReminder:null,paymentMethod:null,notes:"Siempre paga a tiempo",riskLevel:"low",participantId:"part_2",avatar:"👨‍💻"},{id:"payment_3",participantName:"Ana García",phone:"+504 7654-3210",email:"ana.garcia@email.com",isOverdue:!0,daysOverdue:1,dueDate:"2025-01-14",status:"pending",amount:6e3,lastReminder:"2025-01-13",paymentMethod:null,notes:"Dificultades temporales",riskLevel:"medium",participantId:"part_3",avatar:"👩‍🏫"},{id:"payment_4",participantName:"Roberto Mendez",phone:"+504 7890-1234",email:"roberto.mendez@email.com",isOverdue:!0,daysOverdue:7,status:"pending",amount:6e3,lastReminder:"2025-01-07",paymentMethod:null,notes:"No contesta llamadas",riskLevel:"critical",participantId:"part_4",avatar:"👨‍🔧",dueDate:"2025-01-08",escalated:!0}]}getAllParticipantsForTanda(a){return[{id:"part_paid_1",name:"Luis Hernández",phone:"+504 9999-8888",email:"luis.hernandez@email.com",status:"paid",paidDate:"2025-01-08",paymentMethod:"transfer",amount:6e3,avatar:"👨‍⚕️"},{id:"part_paid_2",name:"Carmen Flores",phone:"+504 8888-7777",email:"carmen.flores@email.com",status:"paid",paidDate:"2025-01-07",paymentMethod:"cash",amount:6e3,avatar:"👩‍🎨"},...this.getPendingPaymentsForTanda(a).map(a=>({id:a.participantId,name:a.participantName,phone:a.phone,email:a.email,status:"pending",amount:a.amount,avatar:a.avatar,isOverdue:a.isOverdue,daysOverdue:a.daysOverdue,dueDate:a.dueDate}))]}getRecentPayments(a){return[{participantName:"Luis Hernández",amount:6e3,date:"2025-01-08",method:"transfer",methodLabel:"Transferencia"},{participantName:"Carmen Flores",amount:6e3,date:"2025-01-07",method:"cash",methodLabel:"Efectivo"},{participantName:"Pedro Martínez",amount:6e3,date:"2025-01-06",method:"mobile",methodLabel:"Pago Móvil"}]}markPaymentReceived(a,e){this.createModal("confirm-payment","✅ Confirmar Pago Recibido",`\n      <div class="payment-confirmation">\n        <div class="confirmation-icon">\n          <i class="fas fa-check-circle text-success"></i>\n        </div>\n        <h4>¿Confirmar pago recibido?</h4>\n        <p>Esta acción marcará el pago como completado y actualizará el estado de la tanda.</p>\n        <div class="payment-details-form">\n          <div class="form-group">\n            <label>Método de pago:</label>\n            <select class="form-control" id="paymentMethod">\n              <option value="cash">Efectivo</option>\n              <option value="transfer">Transferencia Bancaria</option>\n              <option value="mobile">Pago Móvil</option>\n              <option value="other">Otro</option>\n            </select>\n          </div>\n          <div class="form-group">\n            <label>Notas adicionales (opcional):</label>\n            <textarea class="form-control" id="paymentNotes" placeholder="Ej: Pago recibido el día de hoy..."></textarea>\n          </div>\n          <div class="form-group">\n            <label>Fecha del pago:</label>\n            <input type="date" class="form-control" id="paymentDate" value="${(new Date).toISOString().split("T")[0]}">\n          </div>\n        </div>\n      </div>\n    `).querySelector(".modal-actions").innerHTML=`\n      <button class="btn btn-success" onclick="advancedGroupsSystem.confirmPaymentReceived('${a}', '${e}')">\n        <i class="fas fa-check"></i> Confirmar Pago\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cancelar\n      </button>\n    `}confirmPaymentReceived(a,e){document.getElementById("paymentMethod").value,document.getElementById("paymentNotes").value,document.getElementById("paymentDate").value,this.closeModal(),this.showNotification("success","Pago registrado exitosamente"),setTimeout(()=>{this.managePendingPayments(e)},1e3)}sendPaymentReminder(a,e){const n=this.createModal("payment-reminder","🔔 Enviar Recordatorio",'\n      <div class="reminder-config">\n        <h4>Selecciona el método de recordatorio:</h4>\n        <div class="reminder-options">\n          <div class="reminder-option" onclick="advancedGroupsSystem.selectReminderMethod(\'sms\')">\n            <i class="fas fa-sms"></i>\n            <h5>SMS</h5>\n            <p>Mensaje de texto directo</p>\n          </div>\n          <div class="reminder-option" onclick="advancedGroupsSystem.selectReminderMethod(\'whatsapp\')">\n            <i class="fab fa-whatsapp"></i>\n            <h5>WhatsApp</h5>\n            <p>Mensaje por WhatsApp</p>\n          </div>\n          <div class="reminder-option" onclick="advancedGroupsSystem.selectReminderMethod(\'call\')">\n            <i class="fas fa-phone"></i>\n            <h5>Llamada</h5>\n            <p>Llamada telefónica</p>\n          </div>\n          <div class="reminder-option" onclick="advancedGroupsSystem.selectReminderMethod(\'email\')">\n            <i class="fas fa-envelope"></i>\n            <h5>Email</h5>\n            <p>Correo electrónico</p>\n          </div>\n        </div>\n        <div class="reminder-message">\n          <label>Mensaje personalizado:</label>\n          <textarea class="form-control" id="reminderMessage" placeholder="Hola [NOMBRE], te recordamos que tienes un pago pendiente de L. [MONTO] para la tanda [TANDA]. Fecha límite: [FECHA].">Hola, te recordamos que tienes un pago pendiente de tu tanda. Por favor, realiza tu aporte a la brevedad posible.</textarea>\n        </div>\n      </div>\n    ');this.selectedPaymentId=a,this.selectedTandaId=e,n.querySelector(".modal-actions").innerHTML='\n      <button class="btn btn-primary" onclick="advancedGroupsSystem.sendSelectedReminder()">\n        <i class="fas fa-paper-plane"></i> Enviar Recordatorio\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cancelar\n      </button>\n    '}selectReminderMethod(a){document.querySelectorAll(".reminder-option").forEach(a=>a.classList.remove("selected")),event.currentTarget.classList.add("selected"),this.selectedReminderMethod=a}sendSelectedReminder(){document.getElementById("reminderMessage").value;const a=this.selectedReminderMethod||"sms";this.closeModal(),this.showNotification("success",`Recordatorio enviado por ${a.toUpperCase()}`),setTimeout(()=>{this.showNotification("info","El participante será notificado en los próximos minutos")},2e3)}togglePaymentActions(a){const e=document.getElementById(`payment-actions-${a}`);if(e){const a=e.classList.contains("show"),n=e.previousElementSibling;if(document.querySelectorAll(".dropdown-menu.show").forEach(a=>{a.classList.remove("show");const e=a.closest(".group-card");e&&e.classList.remove("dropdown-active")}),!a&&n){const a=n.getBoundingClientRect(),t=window.pageYOffset||document.documentElement.scrollTop,s=window.pageXOffset||document.documentElement.scrollLeft,i=180,o=150;let r=a.left+s-i+30,c=a.top+t-o-5;r<10&&(r=a.right+s+10),c<10&&(c=a.top+t,r=a.right+s+10),r+i>window.innerWidth+s&&(r=window.innerWidth+s-i-10),e.style.left=`${r}px`,e.style.top=`${c}px`,e.classList.add("show")}}}contactParticipant(a){this.showNotification("info","Abriendo opciones de contacto...")}extendPaymentDeadline(a){this.showNotification("info","Extendiendo plazo de pago...")}applyLateFee(a){this.showNotification("warning","Aplicando mora por atraso...")}escalatePayment(a){this.showNotification("error","Escalando caso de pago...")}sendBulkReminders(a){this.showNotification("info","Enviando recordatorios masivos..."),setTimeout(()=>{this.showNotification("success","Recordatorios enviados a todos los participantes con pagos pendientes")},2e3)}generatePaymentReport(a){this.showNotification("info","Generando reporte de pagos..."),setTimeout(()=>{this.showNotification("success","Reporte generado y descargado")},3e3)}scheduleAutomaticReminders(a){this.showNotification("info","Programando recordatorios automáticos..."),setTimeout(()=>{this.showNotification("success","Recordatorios automáticos configurados")},2e3)}refreshPaymentStatus(a){this.showNotification("info","Actualizando estado de pagos..."),setTimeout(()=>{this.managePendingPayments(a),this.showNotification("success","Estado de pagos actualizado")},1500)}viewTandaSummary(a){this.showNotification("info","Cargando resumen de tanda completada...")}showNotifications(){const a=this.getPendingNotifications();this.createModal("notifications","🔔 Notificaciones",`\n      <div class="notifications-list">\n        ${a.length>0?a.map(a=>`\n            <div class="notification-item ${a.type}">\n              <div class="notification-icon">\n                <i class="fas fa-${this.getNotificationIcon(a.type)}"></i>\n              </div>\n              <div class="notification-text">\n                <div class="notification-message">${a.message}</div>\n                <div class="notification-time">${a.time||"Hace un momento"}</div>\n              </div>\n            </div>\n          `).join(""):'<div class="empty-notifications">No tienes notificaciones nuevas</div>'}\n      </div>\n    `).querySelector(".modal-actions").innerHTML='\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cerrar\n      </button>\n    '}downloadFile(a,e,n){const t=new Blob([a],{type:n}),s=URL.createObjectURL(t),i=document.createElement("a");i.href=s,i.download=e,document.body.appendChild(i),i.click(),document.body.removeChild(i),URL.revokeObjectURL(s)}delay(a){return new Promise(e=>setTimeout(e,a))}debounce(a,e){let n;return function(...t){clearTimeout(n),n=setTimeout(()=>{clearTimeout(n),a(...t)},e)}}updateResponsiveLayout(){const a=document.querySelector(".container");if(a){const e=window.innerWidth;a.classList.toggle("mobile",e<768),a.classList.toggle("tablet",e>=768&&e<1024)}}async loadTandasContent(a=null){const e=document.getElementById("tandasList");if(!e)return;const n=[{id:"tanda_1",name:"Tanda Enero 2025",groupId:"group_1",groupName:"Cooperativa Familiar",groupAvatar:"👨‍👩‍👧‍👦",status:"active",progress:75,currentRound:3,totalRounds:4,roundAmount:6e3,totalAmount:24e3,nextPaymentDate:"2025-01-15",nextBeneficiary:"María Rodriguez",paymentsPending:2,participants:4,paymentFrequency:"monthly"},{id:"tanda_2",name:"Tanda Profesionales Q4",groupId:"group_2",groupName:"Red Profesional TGU",groupAvatar:"👔",status:"active",progress:50,currentRound:2,totalRounds:4,roundAmount:12e3,totalAmount:48e3,nextPaymentDate:"2025-01-20",nextBeneficiary:"Carlos López",paymentsPending:1,participants:4,paymentFrequency:"monthly"},{id:"tanda_3",name:"Tanda Comunitaria Diciembre",groupId:"group_3",groupName:"Grupo Comunitario",groupAvatar:"🏘️",status:"completed",progress:100,currentRound:6,totalRounds:6,roundAmount:3e3,totalAmount:18e3,completedDate:"2024-12-30",participants:6,paymentFrequency:"biweekly"},{id:"tanda_4",name:"Tanda Familiar Febrero",groupId:"group_1",groupName:"Cooperativa Familiar",groupAvatar:"👨‍👩‍👧‍👦",status:"upcoming",progress:0,currentRound:0,totalRounds:4,roundAmount:6e3,totalAmount:24e3,startDate:"2025-02-01",participants:4,paymentFrequency:"monthly"},{id:"tanda_5",name:"Tanda Express Semanal",groupId:"group_4",groupName:"Emprendedores Unidos",groupAvatar:"💼",status:"active",progress:25,currentRound:1,totalRounds:4,roundAmount:4e3,totalAmount:16e3,nextPaymentDate:"2025-01-12",nextBeneficiary:"Ana García",paymentsPending:3,participants:4,paymentFrequency:"weekly"}],t=a?n.filter(e=>e.groupId===a):n,s=this.calculateTandasStats(t);e.innerHTML=`\n      \x3c!-- Dashboard Header --\x3e\n      <div class="tandas-dashboard-header">\n        ${a?this.renderGroupFilter(a):this.renderAllTandasHeader()}\n        ${this.renderTandasStats(s)}\n        ${this.renderTandasFilters()}\n      </div>\n      \x3c!-- Tandas Grid V2 --\x3e\n      <div class="tandas-grid">\n        ${t.length>0?t.map((a,e)=>this.renderTandaCard(a)).join(""):this.renderEmptyTandasState(a)}\n      </div>\n      \x3c!-- Floating Action Button --\x3e\n      <div class="fab-container">\n        <button class="fab" onclick="advancedGroupsSystem.showCreateTandaModal()" title="Nueva Tanda">\n          <i class="fas fa-plus"></i>\n        </button>\n      </div>\n    `,setTimeout(()=>{const a=document.querySelectorAll(".tanda-card-v2");this.addMobileTouchSupport(a)},100),a&&this.updateTandasBreadcrumb(a)}updateTandasBreadcrumb(a){const e=this.groups.find(e=>e.id===a);if(!e)return;let n=document.querySelector(".tandas-breadcrumb");if(!n){n=document.createElement("div"),n.className="tandas-breadcrumb";const a=document.getElementById("tandasList");a&&a.parentNode.insertBefore(n,a)}n.innerHTML=`\n      <div class="breadcrumb-container">\n        <button class="btn btn-ghost btn-sm" onclick="advancedGroupsSystem.clearTandasFilter()">\n          <i class="fas fa-arrow-left"></i> Todas las Tandas\n        </button>\n        <span class="breadcrumb-separator">→</span>\n        <span class="breadcrumb-current">\n          <i class="fas fa-filter"></i> Tandas de "${e.name}"\n        </span>\n      </div>\n    `}clearTandasFilter(){const a=document.querySelector(".tandas-breadcrumb");a&&a.remove(),this.loadTandasContent()}async loadMatchingContent(){this.showNotification("🔍 Cargando sistema de matching inteligente...","info");const a=document.getElementById("matchingContainer");if(a)try{a.innerHTML=this.getLoadingHTML("Analizando perfiles compatibles..."),await new Promise(a=>setTimeout(a,1500));const e=this.renderMatchingInterface();a.innerHTML=e,a.querySelectorAll('[onclick*="connectWithMatch"]'),a.querySelectorAll('[onclick*="viewMatchDetails"]'),this.initializeMatchingFeatures(),this.showNotification("✨ Sistema de matching cargado exitosamente","success")}catch(e){this.handleError(e,"Sistema de matching"),a.innerHTML=this.getErrorHTML("Error cargando matching",()=>{this.recoverFromError("matching")})}}async loadAnalyticsContent(){this.showNotification("🔄 Cargando analíticas...","info");const a=document.getElementById("analyticsContainer");if(a)try{a.innerHTML=this.getLoadingHTML("Generando reportes y gráficos..."),await new Promise(a=>setTimeout(a,1500));const e=this.renderAnalyticsInterface();a.innerHTML=e,this.initializeAnalyticsFeatures(),this.showNotification("📊 Analíticas cargadas exitosamente","success")}catch(e){this.showNotification("❌ Error cargando analíticas","error"),a.innerHTML=this.getErrorHTML("Error cargando analíticas")}}renderAnalyticsInterface(){const a=this.getFinancialAnalytics(),e=this.getParticipationAnalytics(),n=this.getPerformanceAnalytics(),t=this.getPredictiveAnalytics(),s=this.getRiskAnalytics(),i=this.getTrendAnalytics();return`\n      <div class="analytics-interface">\n        \x3c!-- Analytics Header --\x3e\n        <div class="analytics-header">\n          <div class="analytics-summary">\n            <h2>📊 Tu Rendimiento Financiero</h2>\n            <p>Análisis completo de tu actividad en tandas y grupos cooperativos</p>\n            <div class="summary-period">\n              <label for="analyticsPeriod">Período:</label>\n              <select class="form-select" id="analyticsPeriod" onchange="advancedGroupsSystem.updateAnalyticsPeriod(this.value)">\n                <option value="all">Todo el tiempo</option>\n                <option value="year" selected>Este año (2025)</option>\n                <option value="quarter">Último trimestre</option>\n                <option value="month">Este mes</option>\n              </select>\n              <button class="btn btn-primary" onclick="advancedGroupsSystem.exportAnalytics()">\n                <i class="fas fa-download"></i>\n                <span>Exportar Reporte</span>\n              </button>\n            </div>\n          </div>\n        </div>\n        \x3c!-- Key Performance Indicators --\x3e\n        <div class="analytics-kpis">\n          <div class="kpi-grid">\n            <div class="kpi-card primary">\n              <div class="kpi-icon">💰</div>\n              <div class="kpi-content">\n                <div class="kpi-value">L. ${a.totalSaved.toLocaleString()}</div>\n                <div class="kpi-label">Total Ahorrado</div>\n                <div class="kpi-change positive">+${a.savingsGrowth}% vs mes anterior</div>\n              </div>\n            </div>\n            <div class="kpi-card success">\n              <div class="kpi-icon">✅</div>\n              <div class="kpi-content">\n                <div class="kpi-value">${n.completedTandas}</div>\n                <div class="kpi-label">Tandas Completadas</div>\n                <div class="kpi-change positive">+${n.completionRate}% éxito</div>\n              </div>\n            </div>\n            <div class="kpi-card info">\n              <div class="kpi-icon">⭐</div>\n              <div class="kpi-content">\n                <div class="kpi-value">${n.averageRating}</div>\n                <div class="kpi-label">Calificación Promedio</div>\n                <div class="kpi-change positive">+${n.ratingGrowth}% este mes</div>\n              </div>\n            </div>\n            <div class="kpi-card warning">\n              <div class="kpi-icon">🎯</div>\n              <div class="kpi-content">\n                <div class="kpi-value">${e.activeParticipations}</div>\n                <div class="kpi-label">Participaciones Activas</div>\n                <div class="kpi-change neutral">En ${e.activeGroups} grupos</div>\n              </div>\n            </div>\n          </div>\n        </div>\n        \x3c!-- Charts and Graphs Section --\x3e\n        <div class="analytics-charts">\n          <div class="charts-grid">\n            \x3c!-- Financial Growth Chart --\x3e\n            <div class="chart-card">\n              <div class="chart-header">\n                <h3>💹 Crecimiento de Ahorros</h3>\n                <div class="chart-controls">\n                <button class="chart-btn active" onclick="advancedGroupsSystem.switchChart('savings', 'monthly')">Mensual</button>\n                <button class="chart-btn" onclick="advancedGroupsSystem.switchChart('savings', 'weekly')">Semanal</button>\n                </div>\n              </div>\n              <div class="chart-container">\n                <div class="chart-placeholder" id="savingsChart">\n                ${this.generateSavingsChart(a.monthlyData)}\n                </div>\n              </div>\n            </div>\n            \x3c!-- Participation Distribution --\x3e\n            <div class="chart-card">\n              <div class="chart-header">\n                <h3>📊 Distribución de Participaciones</h3>\n              </div>\n              <div class="chart-container">\n                <div class="chart-placeholder" id="participationChart">\n                ${this.generateParticipationChart(e)}\n                </div>\n              </div>\n            </div>\n            \x3c!-- Performance Timeline --\x3e\n            <div class="chart-card full-width">\n              <div class="chart-header">\n                <h3>⏱️ Timeline de Participación</h3>\n              </div>\n              <div class="chart-container">\n                <div class="timeline-chart" id="performanceTimeline">\n                ${this.generatePerformanceTimeline(n.timeline)}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        \x3c!-- Detailed Analytics Tables --\x3e\n        <div class="analytics-tables">\n          <div class="tables-grid">\n            \x3c!-- Groups Performance --\x3e\n            <div class="table-card">\n              <div class="table-header">\n                <h3>👥 Rendimiento por Grupo</h3>\n                <button class="btn btn-secondary btn-sm" onclick="advancedGroupsSystem.exportGroupsReport()">\n                <i class="fas fa-file-excel"></i>\n                Exportar\n                </button>\n              </div>\n              <div class="table-container">\n                <table class="analytics-table">\n                <thead>\n                <tr>\n                <th>Grupo</th>\n                <th>Total Ahorrado</th>\n                <th>Participaciones</th>\n                <th>Estado</th>\n                <th>ROI</th>\n                </tr>\n                </thead>\n                <tbody>\n                ${e.groupsData.map(a=>`\n                <tr>\n                <td>\n                <div class="group-cell">\n                <span class="group-icon">${a.icon}</span>\n                <span class="group-name">${a.name}</span>\n                </div>\n                </td>\n                <td class="amount">L. ${a.totalSaved.toLocaleString()}</td>\n                <td>\n                <span class="participation-count">${a.participations}</span>\n                <span class="participation-type">${a.type}</span>\n                </td>\n                <td>\n                <span class="status-badge ${a.status}">${a.statusLabel}</span>\n                </td>\n                <td class="roi ${a.roi>0?"positive":"neutral"}">${a.roi}%</td>\n                </tr>\n                `).join("")}\n                </tbody>\n                </table>\n              </div>\n            </div>\n            \x3c!-- Recent Activity --\x3e\n            <div class="table-card">\n              <div class="table-header">\n                <h3>📈 Actividad Reciente</h3>\n                <button class="btn btn-secondary btn-sm" onclick="window.advancedGroupsSystem?.viewFullActivity()">\n                Ver Todo\n                </button>\n              </div>\n              <div class="activity-list">\n                ${n.recentActivity.map(a=>`\n                <div class="activity-item-analytics">\n                <div class="activity-icon-analytics ${a.type}">\n                <i class="fas fa-${a.icon}"></i>\n                </div>\n                <div class="activity-content-analytics">\n                <div class="activity-text">${a.text}</div>\n                <div class="activity-meta">\n                <span class="activity-date">${a.date}</span>\n                <span class="activity-amount">L. ${a.amount?.toLocaleString()||"N/A"}</span>\n                </div>\n                </div>\n                <div class="activity-status ${a.status}">\n                ${a.statusLabel}\n                </div>\n                </div>\n                `).join("")}\n              </div>\n            </div>\n          </div>\n        </div>\n        \x3c!-- Advanced Analytics Sections --\x3e\n        <div class="advanced-analytics">\n          \x3c!-- Predictive Analytics --\x3e\n          <div class="analytics-section">\n            <div class="section-header">\n              <h3>🔮 Análisis Predictivo</h3>\n              <p>Proyecciones basadas en tu historial financiero</p>\n            </div>\n            <div class="predictive-grid">\n              <div class="prediction-card">\n                <div class="prediction-icon">📈</div>\n                <div class="prediction-content">\n                <h4>Ahorro Proyectado (6 meses)</h4>\n                <div class="prediction-value">L. ${t.sixMonthProjection.toLocaleString()}</div>\n                <div class="prediction-confidence">Confianza: ${t.confidence}%</div>\n                <div class="prediction-trend ${t.trend}">${t.trendLabel}</div>\n                </div>\n              </div>\n              <div class="prediction-card">\n                <div class="prediction-icon">🎯</div>\n                <div class="prediction-content">\n                <h4>Meta Recomendada</h4>\n                <div class="prediction-value">L. ${t.recommendedGoal.toLocaleString()}</div>\n                <div class="prediction-timeline">En ${t.timeToGoal} meses</div>\n                <div class="prediction-strategy">Estrategia: ${t.strategy}</div>\n                </div>\n              </div>\n              <div class="prediction-card">\n                <div class="prediction-icon">⚡</div>\n                <div class="prediction-content">\n                <h4>Velocidad de Ahorro</h4>\n                <div class="prediction-value">L. ${t.savingsRate.toLocaleString()}/mes</div>\n                <div class="prediction-change ${t.rateChange>0?"positive":"negative"}">\n                ${t.rateChange>0?"+":""}${t.rateChange}% vs promedio\n                </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          \x3c!-- Risk Analysis --\x3e\n          <div class="analytics-section">\n            <div class="section-header">\n              <h3>⚠️ Análisis de Riesgo</h3>\n              <p>Evaluación de tu perfil de riesgo financiero</p>\n            </div>\n            <div class="risk-assessment">\n              <div class="risk-score-container">\n                <div class="risk-score">\n                <div class="score-circle">\n                <div class="score-value">${s.overallScore}</div>\n                <div class="score-max">/100</div>\n                </div>\n                <div class="score-label">Puntuación de Riesgo</div>\n                <div class="score-category ${s.riskLevel}">${s.riskLabel}</div>\n                </div>\n                <div class="risk-factors">\n                ${s.factors.map(a=>`\n                <div class="risk-factor">\n                <div class="factor-header">\n                <span class="factor-name">${a.name}</span>\n                <span class="factor-score ${a.level}">${a.score}/10</span>\n                </div>\n                <div class="factor-bar">\n                <div class="factor-progress ${a.level}" style="width: ${10*a.score}%"></div>\n                </div>\n                <div class="factor-description">${a.description}</div>\n                </div>\n                `).join("")}\n                </div>\n              </div>\n            </div>\n          </div>\n          \x3c!-- Trend Analysis --\x3e\n          <div class="analytics-section">\n            <div class="section-header">\n              <h3>📊 Análisis de Tendencias</h3>\n              <p>Patrones en tu comportamiento financiero</p>\n            </div>\n            <div class="trends-container">\n              <div class="trend-charts">\n                <div class="trend-chart">\n                <h4>Participación Mensual</h4>\n                <div class="mini-chart" id="participationTrend">\n                ${this.generateTrendChart(i.participation,"participation")}\n                </div>\n                </div>\n                <div class="trend-chart">\n                <h4>Frecuencia de Pagos</h4>\n                <div class="mini-chart" id="paymentTrend">\n                ${this.generateTrendChart(i.payments,"payments")}\n                </div>\n                </div>\n                <div class="trend-chart">\n                <h4>Diversificación</h4>\n                <div class="mini-chart" id="diversificationTrend">\n                ${this.generateTrendChart(i.diversification,"diversification")}\n                </div>\n                </div>\n              </div>\n              <div class="trend-insights">\n                <h4>🔍 Patrones Detectados</h4>\n                <div class="pattern-list">\n                ${i.patterns.map(a=>`\n                <div class="pattern-item ${a.type}">\n                <div class="pattern-icon">${a.icon}</div>\n                <div class="pattern-content">\n                <div class="pattern-title">${a.title}</div>\n                <div class="pattern-description">${a.description}</div>\n                <div class="pattern-impact ${a.impact}">${a.impactLabel}</div>\n                </div>\n                </div>\n                `).join("")}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        \x3c!-- Analytics Insights --\x3e\n          <div class="insights-header">\n            <h3>💡 Insights y Recomendaciones</h3>\n            <p>Análisis inteligente de tu comportamiento financiero</p>\n          </div>\n          <div class="insights-grid">\n            ${this.generateInsights(a,e,n).map(a=>`\n            <div class="insight-card ${a.type}">\n              <div class="insight-icon">\n                <i class="fas fa-${a.icon}"></i>\n              </div>\n              <div class="insight-content">\n                <h4>${a.title}</h4>\n                <p>${a.description}</p>\n                ${a.action?`\n                <div class="insight-action">\n                <button class="btn btn-accent btn-sm insight-btn" data-action="${a.actionText?.toLowerCase().replace(/\s+/g,"-")}" onclick="${a.action}">\n                ${a.actionText}\n                </button>\n                </div>\n                `:""}\n              </div>\n            </div>\n            `).join("")}\n          </div>\n        </div>\n      </div>\n    `}getFinancialAnalytics(){return{totalSaved:24500,savingsGrowth:12.5,monthlyData:[{month:"Ene",amount:1200,target:1500},{month:"Feb",amount:1800,target:1500},{month:"Mar",amount:2200,target:2e3},{month:"Abr",amount:1950,target:2e3},{month:"May",amount:2400,target:2500},{month:"Jun",amount:2800,target:2500},{month:"Jul",amount:3200,target:3e3},{month:"Ago",amount:2900,target:3e3}],weeklyData:[{month:"S1",amount:300,target:375},{month:"S2",amount:450,target:375},{month:"S3",amount:550,target:500},{month:"S4",amount:488,target:500},{month:"S5",amount:600,target:625},{month:"S6",amount:700,target:625},{month:"S7",amount:800,target:750},{month:"S8",amount:725,target:750}],expectedReturns:28750,riskLevel:"Bajo"}}getParticipationAnalytics(){return{activeParticipations:5,activeGroups:3,groupsData:[{name:"Emprendedores Zona Norte",icon:"💼",totalSaved:8500,participations:2,type:"tandas",status:"active",statusLabel:"Activo",roi:8.5},{name:"Cooperativa Familiar",icon:"👨‍👩‍👧‍👦",totalSaved:12e3,participations:3,type:"grupo",status:"active",statusLabel:"Activo",roi:12.3},{name:"Bay Islands Tourism",icon:"🏝️",totalSaved:4e3,participations:1,type:"tanda",status:"pending",statusLabel:"Pendiente",roi:0}],distribution:{tandas:60,grupos:30,individual:10}}}getPerformanceAnalytics(){return{completedTandas:7,completionRate:98,averageRating:4.8,ratingGrowth:5.2,timeline:[{date:"2025-01",event:"Ingreso a Cooperativa Familiar",type:"join",amount:1500,status:"completed"},{date:"2025-03",event:"Primera tanda completada",type:"complete",amount:3e3,status:"completed"},{date:"2025-05",event:"Ingreso a Emprendedores",type:"join",amount:2500,status:"active"},{date:"2025-07",event:"Meta de L.20,000 alcanzada",type:"milestone",amount:2e4,status:"completed"}],recentActivity:[{text:'Pago recibido de "Emprendedores Zona Norte"',date:"Hace 2 horas",amount:1500,type:"payment",icon:"dollar-sign",status:"success",statusLabel:"Completado"},{text:'Contribución enviada a "Cooperativa Familiar"',date:"Hace 1 día",amount:1200,type:"contribution",icon:"arrow-up",status:"success",statusLabel:"Enviado"},{text:'Unión a "Bay Islands Tourism"',date:"Hace 3 días",amount:null,type:"join",icon:"user-plus",status:"pending",statusLabel:"Pendiente"},{text:'Tanda "Vacaciones 2024" completada',date:"Hace 1 semana",amount:5e3,type:"completion",icon:"check-circle",status:"success",statusLabel:"Completado"}]}}getPredictiveAnalytics(){return{sixMonthProjection:45e3,confidence:87,trend:"positive",trendLabel:"Tendencia alcista",recommendedGoal:5e4,timeToGoal:8,strategy:"Incremento gradual",savingsRate:7500,rateChange:15.3,monthlyPredictions:[{month:"Sep 2025",amount:32e3,confidence:92},{month:"Oct 2025",amount:35500,confidence:89},{month:"Nov 2025",amount:39e3,confidence:85},{month:"Dic 2025",amount:42500,confidence:82},{month:"Ene 2026",amount:46e3,confidence:78},{month:"Feb 2026",amount:49500,confidence:75}]}}getRiskAnalytics(){return{overallScore:25,riskLevel:"low",riskLabel:"Riesgo Bajo",factors:[{name:"Diversificación",score:8,level:"excellent",description:"Excelente diversificación en múltiples grupos"},{name:"Historial de Pagos",score:9,level:"excellent",description:"98% de puntualidad en contribuciones"},{name:"Liquidez",score:7,level:"good",description:"Buen margen de liquidez disponible"},{name:"Concentración",score:6,level:"moderate",description:"Concentración moderada en pocos grupos grandes"},{name:"Volatilidad",score:3,level:"low",description:"Baja volatilidad en patrones de ahorro"}],recommendations:["Considera unirte a 1-2 grupos adicionales para mayor diversificación","Mantén tu excelente historial de pagos puntuales","Evalúa aumentar tu contribución mensual en 10-15%"]}}getTrendAnalytics(){return{participation:{data:[65,72,68,75,82,78,85,89,92,88,94,96],trend:"increasing",change:47.7},payments:{data:[88,92,85,94,97,89,96,98,95,99,97,100],trend:"stable",change:13.6},diversification:{data:[3,3,4,4,5,5,6,6,7,7,8,8],trend:"increasing",change:166.7},patterns:[{icon:"📈",type:"positive",title:"Crecimiento Consistente",description:"Tu actividad de ahorro ha aumentado 47% en los últimos 12 meses",impact:"high",impactLabel:"Alto Impacto"},{icon:"🎯",type:"neutral",title:"Pagos Puntuales",description:"Mantienes un 97% de puntualidad en tus contribuciones",impact:"medium",impactLabel:"Impacto Medio"},{icon:"🔄",type:"info",title:"Diversificación Activa",description:"Has incrementado tu participación en diferentes tipos de tandas",impact:"medium",impactLabel:"Impacto Medio"},{icon:"📊",type:"warning",title:"Oportunidad de Optimización",description:"Podrías maximizar tus returns participando en tandas de mayor valor",impact:"low",impactLabel:"Bajo Impacto"}]}}generateTrendChart(a,e){const n=Math.max(...a.data),t=Math.min(...a.data),s=n-t;return`\n      <div class="trend-chart-container">\n        <div class="trend-line">\n          ${a.data.map((e,n)=>{const i=0===s?50:(e-t)/s*100;return`<div class="trend-point" style="left: ${n/(a.data.length-1)*100}%; bottom: ${i}%" data-value="${e}"></div>`}).join("")}\n          <svg class="trend-svg" viewBox="0 0 100 100" preserveAspectRatio="none">\n            <polyline\n              points="${a.data.map((e,n)=>{const i=0===s?50:(e-t)/s*100;return`${n/(a.data.length-1)*100},${100-i}`}).join(" ")}"\n              fill="none"\n              stroke="var(--tanda-cyan)"\n              stroke-width="2"\n              opacity="0.8"\n            />\n          </svg>\n        </div>\n        <div class="trend-stats">\n          <div class="trend-change ${a.trend}">\n            ${a.change>0?"+":""}${a.change}%\n          </div>\n          <div class="trend-label">${"increasing"===a.trend?"Creciendo":"decreasing"===a.trend?"Decreciendo":"Estable"}</div>\n        </div>\n      </div>\n    `}generateSavingsChart(a){const e=Math.max(...a.map(a=>Math.max(a.amount,a.target)));return`\n      <div class="savings-chart">\n        <div class="chart-legend">\n          <div class="legend-item">\n            <span class="legend-color actual"></span>\n            <span>Ahorrado Real</span>\n          </div>\n          <div class="legend-item">\n            <span class="legend-color target"></span>\n            <span>Meta</span>\n          </div>\n        </div>\n        <div class="chart-bars">\n          ${a.map(a=>`\n          <div class="chart-bar-group">\n            <div class="chart-bar-container">\n              <div class="chart-bar target" style="height: ${a.target/e*100}%"></div>\n              <div class="chart-bar actual" style="height: ${a.amount/e*100}%"></div>\n            </div>\n            <div class="chart-bar-label">${a.month}</div>\n            <div class="chart-bar-value">L. ${a.amount.toLocaleString()}</div>\n          </div>\n          `).join("")}\n        </div>\n      </div>\n    `}generateParticipationChart(a){const e=a.distribution.tandas+a.distribution.grupos+a.distribution.individual;return`\n      <div class="participation-chart">\n        <div class="pie-chart">\n          <div class="pie-slice tandas" style="--percentage: ${a.distribution.tandas/e*100}%"></div>\n          <div class="pie-slice grupos" style="--percentage: ${a.distribution.grupos/e*100}%"></div>\n          <div class="pie-slice individual" style="--percentage: ${a.distribution.individual/e*100}%"></div>\n          <div class="pie-center">\n            <span class="pie-total">${a.activeParticipations}</span>\n            <span class="pie-label">Total</span>\n          </div>\n        </div>\n        <div class="pie-legend">\n          <div class="pie-legend-item">\n            <span class="pie-color tandas"></span>\n            <span>Tandas (${a.distribution.tandas}%)</span>\n          </div>\n          <div class="pie-legend-item">\n            <span class="pie-color grupos"></span>\n            <span>Grupos (${a.distribution.grupos}%)</span>\n          </div>\n          <div class="pie-legend-item">\n            <span class="pie-color individual"></span>\n            <span>Individual (${a.distribution.individual}%)</span>\n          </div>\n        </div>\n      </div>\n    `}generatePerformanceTimeline(a){return`\n      <div class="performance-timeline">\n        ${a.map((e,n)=>`\n        <div class="timeline-item ${e.status}">\n          <div class="timeline-marker">\n            <div class="timeline-icon ${e.type}">\n              <i class="fas fa-${this.getTimelineIcon(e.type)}"></i>\n            </div>\n          </div>\n          <div class="timeline-content">\n            <div class="timeline-header">\n              <span class="timeline-event">${e.event}</span>\n              <span class="timeline-date">${e.date}</span>\n            </div>\n            ${e.amount?`\n            <div class="timeline-amount">\n              <i class="fas fa-lempira-sign"></i>\n              L. ${e.amount.toLocaleString()}\n            </div>\n            `:""}\n          </div>\n          ${n<a.length-1?'<div class="timeline-connector"></div>':""}\n        </div>\n        `).join("")}\n      </div>\n    `}getTimelineIcon(a){return{join:"user-plus",complete:"check-circle",milestone:"trophy",payment:"dollar-sign"}[a]||"circle"}generateInsights(a,e,n){return[{type:"success",icon:"chart-line",title:"¡Excelente Progreso!",description:`Has superado tu meta mensual por ${a.savingsGrowth}%. Mantén este ritmo para alcanzar L. ${a.expectedReturns.toLocaleString()} este año.`,action:"window.advancedGroupsSystem?.setNewSavingsGoal()",actionText:"Aumentar Meta"},{type:"warning",icon:"diversify",title:"Diversifica tus Inversiones",description:"El 60% de tus ahorros están en tandas. Considera unirte a más grupos cooperativos para reducir riesgo.",action:"window.advancedGroupsSystem?.getMatchRequirements()",actionText:"Explorar Grupos"},{type:"info",icon:"star",title:"Rating Excepcional",description:`Tu calificación de ${n.averageRating}/5.0 te posiciona en el top 10% de participantes más confiables.`,action:null,actionText:null},{type:"tip",icon:"lightbulb",title:"Oportunidad de Crecimiento",description:"Basado en tu historial, podrías incrementar tus contribuciones en un 20% sin afectar tu flujo de caja.",action:"window.advancedGroupsSystem?.calculateOptimalContribution()",actionText:"Calcular Óptimo"}]}initializeAnalyticsFeatures(){this.addChartInteractivity(),this.setupAnalyticsExports(),this.setupLegendInteractivity(),this.setupActivityButtonsInteractivity()}setupLegendInteractivity(){this.legendEventListener&&document.removeEventListener("click",this.legendEventListener),this.legendEventListener=a=>{const e=a.target.closest(".legend-item.interactive");if(e){const n=e.getAttribute("data-series");n&&(a.preventDefault(),a.stopPropagation(),this.toggleChartSeries(n))}},document.addEventListener("click",this.legendEventListener)}setupActivityButtonsInteractivity(){this.activityButtonEventListener&&document.removeEventListener("click",this.activityButtonEventListener),this.activityButtonEventListener=a=>{if("Ver Todo"===a.target.textContent?.trim()&&a.target.closest(".table-header"))return a.preventDefault(),a.stopPropagation(),void this.viewFullActivity();const e=a.target.closest(".insight-btn");if(e&&e.dataset.action)switch(a.preventDefault(),a.stopPropagation(),e.dataset.action){case"aumentar-meta":this.setNewSavingsGoal();break;case"calcular-óptimo":this.calculateOptimalContribution();break;case"explorar-grupos":this.getMatchRequirements()}},document.addEventListener("click",this.activityButtonEventListener)}addChartInteractivity(){document.querySelectorAll(".chart-bar").forEach(a=>{a.addEventListener("mouseenter",a=>{this.showChartTooltip(a.target)}),a.addEventListener("mouseleave",()=>{this.hideChartTooltip()})})}setupAnalyticsExports(){this.analyticsExportReady=!0}updateAnalyticsPeriod(a){this.showNotification(`📊 Actualizando vista para: ${this.getPeriodLabel(a)}`,"info"),setTimeout(()=>{this.showNotification("✅ Datos actualizados exitosamente","success")},1e3)}getPeriodLabel(a){return{all:"Todo el tiempo",year:"Este año",quarter:"Último trimestre",month:"Este mes"}[a]||a}switchChart(a,e){event.target.closest(".chart-card").querySelectorAll(".chart-btn").forEach(a=>a.classList.remove("active")),event.target.classList.add("active"),"savings"===a&&this.updateSavingsChart(e);const n="monthly"===e?"Mensual":"Semanal";this.showNotification(`📊 Vista cambiada a ${n}`,"info",2e3)}updateSavingsChart(a){const e=this.getFinancialAnalytics(),n="monthly"===a?e.monthlyData:e.weeklyData,t=document.querySelector(".savings-chart");t&&(t.innerHTML=this.generateChartHTML(n),t.style.opacity="0",setTimeout(()=>{t.style.opacity="1"},150))}generateChartHTML(a){const e=Math.max(...a.map(a=>Math.max(a.amount,a.target)));return`\n      <div class="chart-legend">\n        <div class="legend-item interactive" data-series="actual">\n          <span class="legend-color actual"></span>\n          <span>Ahorrado Real</span>\n          <i class="legend-toggle-icon fas fa-eye"></i>\n        </div>\n        <div class="legend-item interactive" data-series="target">\n          <span class="legend-color target"></span>\n          <span>Meta</span>\n          <i class="legend-toggle-icon fas fa-eye"></i>\n        </div>\n      </div>\n      <div class="chart-bars">\n        ${a.map(a=>`\n        <div class="chart-bar-group">\n          <div class="chart-bar-container">\n            <div class="chart-bar target" style="height: ${a.target/e*100}%"></div>\n            <div class="chart-bar actual" style="height: ${a.amount/e*100}%"></div>\n          </div>\n          <div class="chart-bar-label">${a.month}</div>\n          <div class="chart-bar-value actual-value">L. ${a.amount.toLocaleString()}</div>\n          <div class="chart-bar-value target-value" style="display: none;">Meta: L. ${a.target.toLocaleString()}</div>\n        </div>\n        `).join("")}\n      </div>\n    `}toggleChartSeries(a){const e=document.querySelector(`.legend-item[data-series="${a}"]`),n=document.querySelectorAll(`.chart-bar.${a}`),t=document.querySelectorAll(`.${a}-value`),s=e.querySelector(".legend-toggle-icon");e.classList.contains("series-hidden")?(e.classList.remove("series-hidden"),s.className="legend-toggle-icon fas fa-eye",n.forEach(a=>{a.style.opacity="1",a.style.visibility="visible"}),"actual"===a?(t.forEach(a=>a.style.display="block"),document.querySelectorAll(".target-value").forEach(a=>a.style.display="none")):(t.forEach(a=>a.style.display="block"),document.querySelectorAll(".actual-value").forEach(a=>a.style.display="none")),this.showNotification(`👁️ Serie "${"actual"===a?"Ahorrado Real":"Meta"}" mostrada`,"info",1500)):(e.classList.add("series-hidden"),s.className="legend-toggle-icon fas fa-eye-slash",n.forEach(a=>{a.style.opacity="0.2",a.style.visibility="visible"}),t.forEach(a=>a.style.display="none"),"actual"===a?document.querySelectorAll(".target-value").forEach(a=>a.style.display="block"):document.querySelectorAll(".actual-value").forEach(a=>a.style.display="block"),this.showNotification(`🙈 Serie "${"actual"===a?"Ahorrado Real":"Meta"}" oculta`,"info",1500)),e.style.transform="scale(0.95)",setTimeout(()=>{e.style.transform="scale(1)"},150)}exportAnalytics(){this.showNotification("📊 Generando reporte completo...","info"),setTimeout(()=>{this.showNotification("✅ Reporte exportado exitosamente","success")},2e3)}exportGroupsReport(){this.showNotification("📋 Generando reporte de rendimiento por grupo...","info"),setTimeout(()=>{this.showNotification("✅ Reporte de grupos descargado","success")},1500)}viewFullActivity(){const a=this.getFullActivityHistory();this.showModal({title:"📈 Historial Completo de Actividad",content:`\n        <div class="full-activity-modal">\n          <div class="activity-header">\n            <div class="activity-summary">\n              <div class="summary-stat">\n                <span class="stat-number">${a.totalTransactions}</span>\n                <span class="stat-label">Transacciones</span>\n              </div>\n              <div class="summary-stat">\n                <span class="stat-number">L. ${a.totalAmount.toLocaleString()}</span>\n                <span class="stat-label">Monto Total</span>\n              </div>\n              <div class="summary-stat">\n                <span class="stat-number">${a.activeDays}</span>\n                <span class="stat-label">Días Activos</span>\n              </div>\n            </div>\n          </div>\n          <div class="activity-filters">\n            <button class="filter-btn active" onclick="advancedGroupsSystem.filterActivity('all')">\n              <i class="fas fa-list"></i> Todas\n            </button>\n            <button class="filter-btn" onclick="advancedGroupsSystem.filterActivity('payments')">\n              <i class="fas fa-dollar-sign"></i> Pagos\n            </button>\n            <button class="filter-btn" onclick="advancedGroupsSystem.filterActivity('contributions')">\n              <i class="fas fa-arrow-up"></i> Contribuciones\n            </button>\n            <button class="filter-btn" onclick="advancedGroupsSystem.filterActivity('completions')">\n              <i class="fas fa-check-circle"></i> Completadas\n            </button>\n          </div>\n          <div class="full-activity-list" id="fullActivityList">\n            ${this.renderActivityList(a.activities)}\n          </div>\n        </div>\n      `,buttons:[{text:"Exportar CSV",class:"btn-primary",onclick:"advancedGroupsSystem.exportActivityHistory()"},{text:"Cerrar",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal()"}]})}getFullActivityHistory(){const a=[{text:'Pago recibido de "Emprendedores Zona Norte"',date:"2025-08-10 14:30",dateLabel:"Hace 2 horas",amount:1500,type:"payment",icon:"dollar-sign",status:"success",statusLabel:"Completado",group:"Emprendedores Zona Norte"},{text:'Contribución enviada a "Cooperativa Familiar"',date:"2025-08-09 09:15",dateLabel:"Hace 1 día",amount:1200,type:"contribution",icon:"arrow-up",status:"success",statusLabel:"Enviado",group:"Cooperativa Familiar"},{text:'Unión a "Bay Islands Tourism"',date:"2025-08-07 16:45",dateLabel:"Hace 3 días",amount:null,type:"join",icon:"user-plus",status:"pending",statusLabel:"Pendiente",group:"Bay Islands Tourism"},{text:'Tanda "Vacaciones 2024" completada',date:"2025-08-03 11:00",dateLabel:"Hace 1 semana",amount:5e3,type:"completion",icon:"trophy",status:"success",statusLabel:"Completada",group:"Vacaciones 2024"},{text:'Pago recibido de "Cooperativa Familiar"',date:"2025-08-01 13:20",dateLabel:"Hace 9 días",amount:1200,type:"payment",icon:"dollar-sign",status:"success",statusLabel:"Completado",group:"Cooperativa Familiar"},{text:'Contribución enviada a "Emprendedores Zona Norte"',date:"2025-07-28 10:30",dateLabel:"Hace 13 días",amount:1500,type:"contribution",icon:"arrow-up",status:"success",statusLabel:"Enviado",group:"Emprendedores Zona Norte"},{text:'Tanda "Compras Navideñas" iniciada',date:"2025-07-25 15:45",dateLabel:"Hace 16 días",amount:2e3,type:"join",icon:"play-circle",status:"active",statusLabel:"Activa",group:"Compras Navideñas"},{text:"Meta de L.20,000 alcanzada",date:"2025-07-20 18:00",dateLabel:"Hace 21 días",amount:2e4,type:"milestone",icon:"flag-checkered",status:"success",statusLabel:"Logrado",group:null}];return{activities:a,totalTransactions:a.length,totalAmount:a.filter(a=>a.amount).reduce((a,e)=>a+e.amount,0),activeDays:30}}renderActivityList(a){return a.map(a=>`\n      <div class="full-activity-item" data-type="${a.type}">\n        <div class="activity-icon-full ${a.type}">\n          <i class="fas fa-${a.icon}"></i>\n        </div>\n        <div class="activity-content-full">\n          <div class="activity-main">\n            <div class="activity-text-full">${a.text}</div>\n            <div class="activity-date-full">${a.date}</div>\n          </div>\n          <div class="activity-details">\n            ${a.amount?`<span class="activity-amount-full">L. ${a.amount.toLocaleString()}</span>`:""}\n            ${a.group?`<span class="activity-group">${a.group}</span>`:""}\n            <span class="activity-status-full ${a.status}">${a.statusLabel}</span>\n          </div>\n        </div>\n      </div>\n    `).join("")}filterActivity(a){document.querySelectorAll(".filter-btn").forEach(a=>a.classList.remove("active")),event.target.classList.add("active"),document.querySelectorAll(".full-activity-item").forEach(e=>{if("all"===a)e.style.display="flex";else{const n=e.dataset.type,t="payments"===a&&"payment"===n||"contributions"===a&&"contribution"===n||"completions"===a&&("completion"===n||"milestone"===n);e.style.display=t?"flex":"none"}}),this.showNotification(`📋 Filtro aplicado: ${this.getFilterLabel(a)}`,"info",1500)}getFilterLabel(a){return{all:"Todas las actividades",payments:"Solo pagos recibidos",contributions:"Solo contribuciones",completions:"Solo completadas"}[a]||"Todas"}exportActivityHistory(){this.showNotification("📊 Generando archivo CSV...","info"),setTimeout(()=>{this.showNotification("✅ Historial exportado exitosamente","success")},2e3)}setNewSavingsGoal(){const a=28750,e=Math.round(33062.5);this.showModal({title:"🎯 Configurar Nueva Meta de Ahorros",content:`\n        <div class="savings-goal-modal">\n          <div class="current-progress">\n            <h4>📊 Progreso Actual</h4>\n            <div class="progress-stats">\n              <div class="stat-item">\n                <span class="stat-label">Meta Actual</span>\n                <span class="stat-value">L. ${a.toLocaleString()}</span>\n              </div>\n              <div class="stat-item">\n                <span class="stat-label">Ahorrado</span>\n                <span class="stat-value success">L. ${24500..toLocaleString()}</span>\n              </div>\n              <div class="stat-item">\n                <span class="stat-label">Progreso</span>\n                <span class="stat-value">${Math.round(85.21739130434783)}%</span>\n              </div>\n            </div>\n          </div>\n          <div class="goal-suggestions">\n            <h4>💡 Metas Sugeridas</h4>\n            <div class="goal-options">\n              <button class="goal-option-btn" onclick="advancedGroupsSystem.selectGoal(${Math.round(1.1*a)})">\n                <div class="goal-amount">L. ${Math.round(1.1*a).toLocaleString()}</div>\n                <div class="goal-label">Conservadora (+10%)</div>\n                <div class="goal-timeline">12 meses</div>\n              </button>\n              <button class="goal-option-btn recommended" onclick="advancedGroupsSystem.selectGoal(${e})">\n                <div class="goal-amount">L. ${e.toLocaleString()}</div>\n                <div class="goal-label">Recomendada (+15%)</div>\n                <div class="goal-timeline">12 meses</div>\n                <div class="recommended-badge">✨ Recomendada</div>\n              </button>\n              <button class="goal-option-btn" onclick="advancedGroupsSystem.selectGoal(${Math.round(35937.5)})">\n                <div class="goal-amount">L. ${Math.round(35937.5).toLocaleString()}</div>\n                <div class="goal-label">Ambiciosa (+25%)</div>\n                <div class="goal-timeline">15 meses</div>\n              </button>\n            </div>\n          </div>\n          <div class="custom-goal">\n            <h4>🎨 Meta Personalizada</h4>\n            <div class="custom-input-group">\n              <label for="customGoalInput">Ingresa tu meta personalizada:</label>\n              <div class="input-with-prefix">\n                <span class="currency-prefix">L.</span>\n                <input type="number" id="customGoalInput" placeholder="${e}" min="24500" max="100000" step="100">\n              </div>\n              <button class="btn btn-secondary btn-sm" onclick="advancedGroupsSystem.selectCustomGoal()">\n                Establecer Meta\n              </button>\n            </div>\n          </div>\n        </div>\n      `,buttons:[{text:"Cancelar",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal()"}]})}selectGoal(a){this.hideModal(),this.showNotification(`🎯 Nueva meta establecida: L. ${a.toLocaleString()}`,"success",3e3),setTimeout(()=>{this.showNotification("📊 Meta sincronizada con el servidor","info",2e3)},1e3)}selectCustomGoal(){const a=document.getElementById("customGoalInput"),e=parseInt(a.value);!e||e<24500?this.showNotification("❌ La meta debe ser mayor a tus ahorros actuales","error",3e3):e>1e5?this.showNotification("❌ Meta demasiado alta. Máximo: L. 100,000","error",3e3):this.selectGoal(e)}calculateOptimalContribution(){this.showNotification("🧮 Analizando tu capacidad financiera...","info"),setTimeout(()=>{this.showOptimalContributionResults()},2500)}showOptimalContributionResults(){const a=3800;this.showModal({title:"🧮 Análisis de Contribución Óptima",content:`\n        <div class="contribution-analysis-modal">\n          <div class="financial-summary">\n            <h4>💰 Resumen Financiero</h4>\n            <div class="financial-breakdown">\n              <div class="breakdown-item">\n                <span class="breakdown-label">Ingreso Mensual</span>\n                <span class="breakdown-value income">L. ${15e3.toLocaleString()}</span>\n              </div>\n              <div class="breakdown-item">\n                <span class="breakdown-label">Gastos Fijos</span>\n                <span class="breakdown-value expense">L. ${11200..toLocaleString()}</span>\n              </div>\n              <div class="breakdown-item">\n                <span class="breakdown-label">Disponible para Ahorro</span>\n                <span class="breakdown-value available">L. ${a.toLocaleString()}</span>\n              </div>\n            </div>\n          </div>\n          <div class="contribution-comparison">\n            <h4>📊 Comparación de Contribuciones</h4>\n            <div class="comparison-grid">\n              <div class="comparison-card current">\n                <div class="card-header">\n                <span class="card-title">Actual</span>\n                </div>\n                <div class="card-amount">L. ${1500..toLocaleString()}</div>\n                <div class="card-percentage">${Math.round(39.473684210526315)}% del disponible</div>\n                <div class="card-impact">\n                <div class="impact-item">\n                <span>Ahorro anual:</span>\n                <span>L. ${18e3.toLocaleString()}</span>\n                </div>\n                </div>\n              </div>\n              <div class="comparison-card optimal">\n                <div class="card-header">\n                <span class="card-title">Óptima</span>\n                <span class="optimization-badge">+${Math.round(100*(1.2-1))}%</span>\n                </div>\n                <div class="card-amount">L. ${1800..toLocaleString()}</div>\n                <div class="card-percentage">${Math.round(47.368421052631575)}% del disponible</div>\n                <div class="card-impact">\n                <div class="impact-item">\n                <span>Ahorro anual:</span>\n                <span>L. ${21600..toLocaleString()}</span>\n                </div>\n                <div class="impact-item success">\n                <span>Ganancia extra:</span>\n                <span>L. ${3600..toLocaleString()}</span>\n                </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class="optimization-recommendations">\n            <h4>💡 Recomendaciones Personalizadas</h4>\n            <div class="recommendations-list">\n              <div class="recommendation-item">\n                <i class="fas fa-chart-line recommendation-icon success"></i>\n                <div class="recommendation-content">\n                <div class="recommendation-title">Incremento Gradual</div>\n                <div class="recommendation-desc">Aumenta L. 100 cada mes hasta llegar a L. 1,800</div>\n                </div>\n              </div>\n              <div class="recommendation-item">\n                <i class="fas fa-users recommendation-icon info"></i>\n                <div class="recommendation-content">\n                <div class="recommendation-title">Diversificación</div>\n                <div class="recommendation-desc">Divide entre 2 tandas de L. 900 c/u para reducir riesgo</div>\n                </div>\n              </div>\n              <div class="recommendation-item">\n                <i class="fas fa-calendar-alt recommendation-icon warning"></i>\n                <div class="recommendation-content">\n                <div class="recommendation-title">Frecuencia Óptima</div>\n                <div class="recommendation-desc">Considera pagos quincenales de L. 900 para mejor flujo</div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class="implementation-options">\n            <h4>🚀 ¿Quieres implementar estos cambios?</h4>\n            <div class="implementation-buttons">\n              <button class="btn btn-primary" onclick="advancedGroupsSystem.implementOptimalContribution(1800)">\n                <i class="fas fa-rocket"></i>\n                Implementar Ahora\n              </button>\n              <button class="btn btn-secondary" onclick="advancedGroupsSystem.scheduleContributionIncrease(1800)">\n                <i class="fas fa-clock"></i>\n                Programar Incremento\n              </button>\n            </div>\n          </div>\n        </div>\n      `,buttons:[{text:"Guardar Análisis",class:"btn-secondary",onclick:"advancedGroupsSystem.saveAnalysisReport()"},{text:"Cerrar",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal()"}]})}implementOptimalContribution(a){this.hideModal(),this.showNotification(`🚀 Contribución actualizada a L. ${a.toLocaleString()}`,"success",3e3),setTimeout(()=>{this.showNotification("📊 Cambios aplicados a todas tus tandas activas","info",2500)},1500)}scheduleContributionIncrease(a){this.hideModal(),this.showNotification("📅 Incremento programado: +L. 100 cada mes","info",3e3),setTimeout(()=>{this.showNotification("🔔 Recibirás recordatorios mensuales para el incremento","info",2500)},1500)}saveAnalysisReport(){this.showNotification("💾 Reporte guardado en tu historial","success",2e3),setTimeout(()=>{this.hideModal()},1e3)}showChartTooltip(a){}hideChartTooltip(){}initializeMultiStepForm(a=0){if(this.isMultiStepInitialized&&0===a)return;const e=document.getElementById("create"),n=e?e.querySelectorAll(".step-container"):document.querySelectorAll(".step-container");document.querySelector(".multi-step-form"),document.getElementById("create-group-form"),0===n.length&&a<5?setTimeout(()=>{this.initializeMultiStepForm(a+1)},200):0!==n.length&&(this.currentStep=1,this.maxSteps=4,this.formData={},n.forEach((a,e)=>{1===parseInt(a.getAttribute("data-step"))?(a.classList.add("active"),a.style.display="block",a.style.opacity="1",a.style.visibility="visible",a.style.height="auto"):(a.classList.remove("active"),a.style.display="none",a.style.opacity="0",a.style.visibility="hidden",a.style.height="0")}),this.setupFormEventListeners(),this.setupFormValidation(),this.isMultiStepInitialized=!0)}setupFormEventListeners(){const a=document.getElementById("next-step"),e=document.getElementById("previous-step"),n=document.getElementById("create-group-form");this.boundNextStep||(this.boundNextStep=()=>this.nextStep()),this.boundPrevStep||(this.boundPrevStep=()=>this.previousStep()),a&&(a.removeEventListener("click",this.boundNextStep),a.addEventListener("click",this.boundNextStep)),e&&(e.removeEventListener("click",this.boundPrevStep),e.addEventListener("click",this.boundPrevStep));const t=document.getElementById("group-description"),s=document.getElementById("desc-count");t&&s&&t.addEventListener("input",a=>{s.textContent=a.target.value.length}),n&&!n.dataset.initialized&&(n.dataset.initialized="true",n.addEventListener("change",()=>{this.saveFormData(),this.debouncedUpdateNavigation()}),n.addEventListener("input",()=>{this.debouncedUpdateNavigation()}))}setupFormValidation(){document.querySelectorAll("input[required], select[required], textarea[required]").forEach(a=>{a.addEventListener("blur",()=>{this.validateField(a)}),a.addEventListener("input",()=>{a.classList.contains("error")&&this.validateField(a)})})}validateField(a){const e=a.closest(".form-group"),n=e.querySelector(".error-message");let t=!0,s="";if(a.hasAttribute("required")&&!a.value.trim()&&(t=!1,s="Este campo es obligatorio"),t&&"group-name"===a.id&&(a.value.length<3?(t=!1,s="El nombre debe tener al menos 3 caracteres"):a.value.length>50?(t=!1,s="El nombre no puede exceder 50 caracteres"):/^[a-zA-ZÀ-ÿ0-9\s\-\.]+$/.test(a.value)||(t=!1,s="El nombre solo puede contener letras, números, espacios, guiones y puntos")),t&&"group-description"===a.id&&(a.value.length<10?(t=!1,s="La descripción debe tener al menos 10 caracteres"):a.value.length>250&&(t=!1,s="La descripción no puede exceder 250 caracteres")),t&&"location"===a.id&&a.value.length<2&&(t=!1,s="La ubicación debe tener al menos 2 caracteres"),t&&"contribution"===a.id){const e=parseFloat(a.value);isNaN(e)||e<100?(t=!1,s="La contribución mínima es L.100"):e>5e4&&(t=!1,s="La contribución máxima es L.50,000")}if(t&&"max-participants"===a.id){const e=parseInt(a.value);isNaN(e)||e<2?(t=!1,s="Mínimo 2 participantes"):e>50&&(t=!1,s="Máximo 50 participantes")}if(t&&"penalty-amount"===a.id){const e=parseFloat(a.value);""!==e&&!isNaN(e)&&e<0?(t=!1,s="La multa no puede ser negativa"):e>500&&(t=!1,s="La multa máxima es L.500")}if(t&&"grace-period"===a.id){const e=parseInt(a.value);""!==e&&!isNaN(e)&&e<0?(t=!1,s="El período de gracia no puede ser negativo"):e>15&&(t=!1,s="El período de gracia máximo es 15 días")}return t?(e.classList.remove("error"),e.classList.add("valid"),n&&(n.classList.remove("show"),setTimeout(()=>n.textContent="",300))):(e.classList.remove("valid"),e.classList.add("error"),n&&(n.textContent=s,n.classList.add("show"))),t}validateCurrentStep(){const a=document.querySelector(`.step-container[data-step="${this.currentStep}"]`);if(!a)return!0;const e=a.querySelectorAll("input[required], select[required], textarea[required]");let n=!0,t=[];if(e.forEach(a=>{if(!this.validateField(a)){n=!1;const e=a.closest(".form-group")?.querySelector("label")?.textContent||a.placeholder||"Campo";t.push(e.replace(" *",""))}}),!n){const e=`Por favor, complete los siguientes campos obligatorios:\n• ${t.join("\n• ")}`;this.showNotification(e,"warning",8e3);const n=a.querySelector(".form-group.error input, .form-group.error select, .form-group.error textarea");n&&(n.focus(),n.scrollIntoView({behavior:"smooth",block:"center"}))}return n}nextStep(){return this.validateCurrentStep()?this.currentStep<this.maxSteps&&(this.saveFormData(),this.currentStep++,this.updateStepDisplay(),setTimeout(()=>{this.updateNavigation()},100),4===this.currentStep&&this.generateConfirmationSummary(),!0):(this.showNotification("Por favor, corrige los errores antes de continuar","error"),!1)}previousStep(){this.currentStep>1&&(this.currentStep--,this.updateStepDisplay(),this.updateNavigation())}updateStepDisplay(){document.querySelectorAll(".step").forEach((a,e)=>{const n=e+1;a.classList.remove("active","completed"),n===this.currentStep?a.classList.add("active"):n<this.currentStep&&a.classList.add("completed")}),document.querySelectorAll(".step-container").forEach(a=>{a.classList.remove("active"),a.style.display="none",a.style.opacity="0",a.style.visibility="hidden",a.style.height="0"});const a=document.querySelector(`.step-container[data-step="${this.currentStep}"]`);a&&(a.classList.add("active"),a.style.display="block",a.style.opacity="1",a.style.visibility="visible",a.style.height="auto");const e=document.querySelector(".progress-bar .progress-fill");if(e){const a=(this.currentStep-1)/(this.maxSteps-1)*100;e.style.width=`${a}%`}const n=document.getElementById("create");n&&n.scrollIntoView({behavior:"smooth",block:"start"})}updateNavigation(){const a=document.getElementById("previous-step"),e=document.getElementById("next-step");if(a&&(a.style.display=1===this.currentStep?"none":"flex",a.disabled=!1),e){const a=this.checkCurrentStepCompletion();this.currentStep===this.maxSteps?(e.innerHTML='<span>Crear Grupo</span><i class="fas fa-check"></i>',e.className="btn btn-success",e.onclick=()=>this.submitForm()):(e.innerHTML='<span>Continuar</span><i class="fas fa-arrow-right"></i>',e.className=a?"btn btn-primary":"btn btn-secondary",e.disabled=!a,e.onclick=()=>this.nextStep())}}checkCurrentStepCompletion(){const a=document.querySelector(`.step-container[data-step="${this.currentStep}"]`);if(!a)return!0;const e=a.querySelectorAll("input[required], select[required], textarea[required]");let n=!0;return e.forEach(a=>{a.value.trim()||(n=!1)}),n}debouncedUpdateNavigation(){this.navigationTimeout&&clearTimeout(this.navigationTimeout),this.navigationTimeout=setTimeout(()=>{this.updateNavigation()},100)}saveFormData(){const a=document.getElementById("create-group-form");if(!a)return;const e={};a.querySelectorAll("input, select, textarea").forEach(a=>{"checkbox"===a.type?e[a.id]=a.checked:"radio"===a.type&&a.checked?e[a.name]=a.value:"radio"!==a.type&&(e[a.id]=a.value)}),this.formData=e,localStorage.setItem("create-group-draft",JSON.stringify(e))}async submitForm(){if(this.validateCurrentStep()){this.saveFormData();try{this.showNotification("Creando grupo...","info");const a={name:this.formData["group-name"],contribution_amount:parseInt(this.formData.contribution||1500),frequency:this.formData["payment-frequency"],max_members:parseInt(this.formData["max-participants"]||12),coordinator_id:this.currentUser?.id||"user_001",location:this.formData.location||"La Tanda Chain Network",description:this.formData["group-description"]||`Grupo ${this.formData["group-name"]} - ${this.formData["payment-frequency"]}`,category:this.formData["group-type"]||"general"},e=this.apiProxy.request?"request":"makeRequest",n=await this.apiProxy[e]("/api/registration/groups/create",{method:"POST",body:a});if(!(n.success&&n.data&&n.data.group)){const a=n.data?.error?.message||"Error desconocido de la API";return void this.showNotification(`❌ Error al crear grupo: ${a}`,"error")}{const a=n.data.group,e={...a,id:a.id,members:a.member_count,maxMembers:a.max_members,contribution:a.contribution_amount,totalSavings:a.total_amount_collected,isOwner:!0,isAdmin:!0,performance:100,trustScore:85,created:new Date(a.created_at),avatar:this.getGroupAvatar(a.category),tags:this.generateTags(a.category,a.name),nextMeeting:this.formData["start-date"]||(new Date).toISOString().split("T")[0],frequency:this.formData["payment-frequency"]};this.groups.push(e),this.userStats.totalGroups++,this.saveGroupsData(this.groups),localStorage.removeItem("create-group-draft"),this.showNotification("¡Grupo creado exitosamente!","success",5e3)}this.resetForm(),this.switchTab("groups"),this.updateDashboard(),setTimeout(()=>{this.loadGroupsContent()},1e3)}catch(a){this.showNotification("Error al crear el grupo. Inténtalo nuevamente.","error")}}else this.showNotification("Por favor, corrige los errores antes de crear el grupo","error")}generateConfirmationSummary(){const a=document.getElementById("confirmationSummary");if(!a||!this.formData)return;const e=parseInt(this.formData.contribution)||0,n=parseInt(this.formData["max-participants"])||0,t=e*n;var s,i;a.innerHTML=`\n      <div class="summary-grid">\n        <div class="summary-section">\n          <h4><i class="fas fa-info-circle"></i> Información Básica</h4>\n          <div class="summary-item">\n            <span class="label">Nombre:</span>\n            <span class="value">${this.formData["group-name"]||"Sin especificar"}</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">Tipo:</span>\n            <span class="value">${i=this.formData["group-type"],{familiar:"Familiar",laboral:"Laboral",comunitario:"Comunitario",comercial:"Comercial"}[i]||i}</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">Ubicación:</span>\n            <span class="value">${this.formData.location||"Sin especificar"}</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">Descripción:</span>\n            <span class="value">${this.formData["group-description"]||"Sin descripción"}</span>\n          </div>\n        </div>\n        <div class="summary-section">\n          <h4><i class="fas fa-dollar-sign"></i> Configuración Financiera</h4>\n          <div class="summary-item">\n            <span class="label">Contribución:</span>\n            <span class="value">L. ${e.toLocaleString()}</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">Máx. Participantes:</span>\n            <span class="value">${n} personas</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">Frecuencia:</span>\n            <span class="value">${s=this.formData["payment-frequency"],{weekly:"Semanal",biweekly:"Quincenal",monthly:"Mensual"}[s]||s}</span>\n          </div>\n          ${this.formData["start-date"]?`\n          <div class="summary-item">\n            <span class="label">Fecha de inicio:</span>\n            <span class="value">${this.formData["start-date"]}</span>\n          </div>\n          `:""}\n        </div>\n        <div class="summary-section">\n          <h4><i class="fas fa-shield-alt"></i> Configuración Avanzada</h4>\n          <div class="summary-item">\n            <span class="label">Multa por retraso:</span>\n            <span class="value">L. ${this.formData["penalty-amount"]||0}</span>\n          </div>\n          <div class="summary-item">\n            <span class="label">Período de gracia:</span>\n            <span class="value">${this.formData["grace-period"]||0} días</span>\n          </div>\n          ${this.formData["group-rules"]?'\n          <div class="summary-item">\n            <span class="label">Reglas personalizadas:</span>\n            <span class="value">Definidas</span>\n          </div>\n          ':""}\n        </div>\n        <div class="summary-section highlight">\n          <h4><i class="fas fa-calculator"></i> Proyección Financiera</h4>\n          <div class="highlight-box">\n            <div class="highlight-item">\n              <span class="label">Total por ciclo:</span>\n              <span class="value primary">L. ${t.toLocaleString()}</span>\n            </div>\n            <div class="highlight-item">\n              <span class="label">Duración completa:</span>\n              <span class="value">${n} ciclos</span>\n            </div>\n            <div class="highlight-item">\n              <span class="label">Beneficio máximo:</span>\n              <span class="value success">L. ${t.toLocaleString()}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    `}resetForm(){this.currentStep=1,this.formData={};const a=document.getElementById("create-group-form");a&&a.reset(),document.querySelectorAll(".form-group.error").forEach(a=>{a.classList.remove("error")}),document.querySelectorAll(".error-message.show").forEach(a=>{a.classList.remove("show")}),this.updateStepDisplay(),this.updateNavigation()}calculateActiveDays(a){const e=new Date,n=new Date(a),t=Math.abs(e-n);return Math.ceil(t/864e5)}generateMembersList(a){const e=["Ana García","Carlos López","María Rodriguez","Juan Pérez","Sofia Martínez"],n=["👩‍💼","👨‍💻","👩‍🏫","👨‍⚕️","👩‍🎨"];let t="";for(let s=0;s<a.members;s++){const i=0===s&&a.isOwner,o=(1===s||i)&&a.isAdmin;t+=`\n        <div class="member-item">\n          <div class="member-avatar">${n[s%n.length]}</div>\n          <div class="member-info">\n            <div class="member-name">${e[s%e.length]}</div>\n            <div class="member-role ${i?"owner":o?"admin":"member"}">\n              ${i?"Coordinador":o?"Administrador":"Miembro"}\n            </div>\n          </div>\n          <div class="member-status">\n            <span class="status-indicator active"></span>\n            <span class="status-text">Activo</span>\n          </div>\n        </div>\n      `}return t||'<p class="no-members">No hay miembros para mostrar</p>'}generateGroupActivity(a){return[{type:"payment",icon:"fas fa-money-bill-wave",text:"Pago recibido de L. 1,500",time:"2 horas",color:"success"},{type:"member",icon:"fas fa-user-plus",text:"Nuevo miembro se unió al grupo",time:"1 día",color:"info"},{type:"meeting",icon:"fas fa-calendar",text:"Reunión programada para mañana",time:"2 días",color:"warning"},{type:"achievement",icon:"fas fa-trophy",text:"Grupo alcanzó 90% de puntualidad",time:"3 días",color:"success"}].map(a=>`\n      <div class="activity-item">\n        <div class="activity-icon ${a.color}">\n          <i class="${a.icon}"></i>\n        </div>\n        <div class="activity-content">\n          <p class="activity-text">${a.text}</p>\n          <span class="activity-time">Hace ${a.time}</span>\n        </div>\n      </div>\n    `).join("")}manageGroup(a){const e=this.groups.find(e=>e.id===a);if(!e||!e.isAdmin)return void this.showNotification("⚠️ No tienes permisos para administrar este grupo","warning");const n=this.createModal("manage-group",`🔧 Administrar: ${e.name}`,`\n      <div class="manage-group-container">\n        <div class="management-tabs">\n          <button class="tab-btn active" onclick="advancedGroupsSystem.showManagementTab('members', '${a}')">\n            <i class="fas fa-users"></i> Miembros\n          </button>\n          <button class="tab-btn" onclick="advancedGroupsSystem.showManagementTab('settings', '${a}')">\n            <i class="fas fa-cog"></i> Configuración\n          </button>\n          <button class="tab-btn" onclick="advancedGroupsSystem.showManagementTab('finances', '${a}')">\n            <i class="fas fa-chart-line"></i> Finanzas\n          </button>\n          <button class="tab-btn" onclick="advancedGroupsSystem.showManagementTab('notifications', '${a}')">\n            <i class="fas fa-bell"></i> Notificaciones\n          </button>\n        </div>\n        <div id="management-content" class="management-content">\n          ${this.renderMembersManagement(e)}\n        </div>\n      </div>\n    `);setTimeout(()=>{const e=n.querySelector(".modal-actions");e&&(e.innerHTML=`\n          <button class="btn btn-success" onclick="advancedGroupsSystem.saveGroupChanges('${a}')">\n            <i class="fas fa-save"></i> Guardar Cambios\n          </button>\n          <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n            <i class="fas fa-times"></i> Cerrar\n          </button>\n        `,e.style.display="flex",e.style.position="sticky",e.style.bottom="0",e.style.zIndex="999999",e.style.background="linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95))",e.style.backdropFilter="blur(20px)",e.style.borderTop="2px solid rgba(0, 255, 255, 0.3)")},100)}showManagementTab(a,e){const n=this.groups.find(a=>a.id===e);if(!n)return;document.querySelectorAll(".tab-btn").forEach(a=>a.classList.remove("active"));const t=Array.from(document.querySelectorAll(".tab-btn")).find(e=>e.onclick&&e.onclick.toString().includes(`'${a}'`));t&&t.classList.add("active");const s=document.getElementById("management-content");if(s)try{switch(a){case"members":s.innerHTML=this.renderMembersManagement(n),this.updateModalActions(e,"members");break;case"settings":s.innerHTML=this.renderSettingsManagement(n),this.updateModalActions(e,"settings");break;case"finances":s.innerHTML=this.renderFinancesManagement(n),this.updateModalActions(e,"finances");break;case"notifications":s.innerHTML=this.renderNotificationsManagement(n),this.updateModalActions(e,"notifications")}}catch(e){s.innerHTML=`<div class="error-message">Error cargando ${a}</div>`}}renderMembersManagement(a){return`\n      <div class="members-management">\n        <div class="section-header">\n          <h4>Gestión de Miembros (${a.members}/${a.maxMembers})</h4>\n          <button class="btn btn-primary btn-sm" onclick="advancedGroupsSystem.inviteMembers('${a.id}')">\n            <i class="fas fa-user-plus"></i> Invitar Miembros\n          </button>\n        </div>\n        <div class="members-list-management">\n          ${this.generateMembersManagementList(a)}\n        </div>\n        ${a.members<a.maxMembers?`\n        <div class="invite-section">\n          <h5>Invitar Nuevos Miembros</h5>\n          <div class="invite-form">\n            <input type="email" placeholder="Correo electrónico" class="form-control" id="invite-email">\n            <button class="btn btn-success" onclick="advancedGroupsSystem.sendInvitation('${a.id}')">\n              <i class="fas fa-paper-plane"></i> Enviar Invitación\n            </button>\n          </div>\n        </div>\n        `:""}\n      </div>\n    `}generateMembersManagementList(a){const e=[{name:"Ana García (Tú)",avatar:"👩‍💼",email:"ana@email.com",isOwner:!0,isCurrentUser:!0},{name:"Carlos López",avatar:"👨‍💻",email:"carlos@email.com",isOwner:!1,isCurrentUser:!1},{name:"María Rodriguez",avatar:"👩‍🏫",email:"maria@email.com",isOwner:!1,isCurrentUser:!1},{name:"Juan Pérez",avatar:"👨‍⚕️",email:"juan@email.com",isOwner:!1,isCurrentUser:!1},{name:"Sofia Martínez",avatar:"👩‍🎨",email:"sofia@email.com",isOwner:!1,isCurrentUser:!1},{name:"Luis González",avatar:"👨‍🔧",email:"luis@email.com",isOwner:!1,isCurrentUser:!1},{name:"Carmen Ruiz",avatar:"👩‍⚖️",email:"carmen@email.com",isOwner:!1,isCurrentUser:!1},{name:"Diego Torres",avatar:"👨‍🎯",email:"diego@email.com",isOwner:!1,isCurrentUser:!1}],n=Math.min(a.members||8,e.length);let t="";for(let s=0;s<n;s++){const n=e[s],i=`member_${s}`;t+=`\n        <div class="member-management-item" data-member-id="${i}">\n          <div class="member-info-detailed">\n            <div class="member-avatar">${n.avatar}</div>\n            <div class="member-details">\n              <div class="member-name">${n.name}</div>\n              <div class="member-email">${n.email}</div>\n              <div class="member-badges">\n                ${n.isOwner?'<span class="badge badge-owner">Coordinador</span>':'<span class="badge badge-member">Miembro</span>'}\n                ${n.isCurrentUser?'<span class="badge badge-current">Tú</span>':""}\n              </div>\n            </div>\n          </div>\n          <div class="member-actions">\n            ${n.isCurrentUser?'<span class="text-muted current-user">Tu cuenta</span>':`\n            <div class="role-selector">\n              <select class="form-select form-select-sm" onchange="advancedGroupsSystem.changeRole('${a.id}', '${i}', this.value)">\n                <option value="member" ${n.isOwner?"":"selected"}>Miembro</option>\n                <option value="admin" ${n.isOwner?"selected":""}>Administrador</option>\n              </select>\n            </div>\n            <button class="btn btn-danger btn-sm" onclick="advancedGroupsSystem.removeMember('${a.id}', '${i}')" title="Remover miembro">\n              <i class="fas fa-user-times"></i>\n            </button>\n            `}\n          </div>\n        </div>\n      `}return t}generateGroupDetailsMembersList(a){const e=[{name:"Carlos López",avatar:"👨‍💻",email:"carlos@email.com"},{name:"María Rodriguez",avatar:"👩‍🏫",email:"maria@email.com"},{name:"Juan Pérez",avatar:"👨‍⚕️",email:"juan@email.com"},{name:"Sofia Martínez",avatar:"👩‍🎨",email:"sofia@email.com"},{name:"Luis González",avatar:"👨‍🔧",email:"luis@email.com"},{name:"Carmen Ruiz",avatar:"👩‍⚖️",email:"carmen@email.com"},{name:"Diego Torres",avatar:"👨‍🎯",email:"diego@email.com"}],n=[];a.isOwner?n.push({name:"Ana García (Tú)",avatar:"👩‍💼",email:"ana@email.com",isOwner:!0,isCurrentUser:!0,role:"Coordinador"}):n.push({name:a.coordinatorName||"Coordinador",avatar:"👑",email:`${(a.coordinatorName||"coordinador").toLowerCase().replace(" ",".")}@email.com`,isOwner:!0,isCurrentUser:!1,role:"Coordinador"});const t=Math.min(a.members-1,e.length);for(let s=0;s<t;s++){const t=e[s],i=!a.isOwner&&s===a.memberNumber-2;n.push({name:i?`${t.name} (Tú)`:t.name,avatar:t.avatar,email:t.email,isOwner:!1,isCurrentUser:i,role:"Miembro"})}const s=Math.min(a.members||8,n.length);let i="";for(let e=0;e<s;e++){const t=n[e],s=`${a.id}_member_${e}`;i+=`\n        <div class="member-detail-item clickable-member"\n          data-member-id="${s}"\n          onclick="advancedGroupsSystem.viewMemberProfile('${s}', '${a.id}')"\n          title="Ver perfil de ${t.name}">\n          <div class="member-avatar-detail">${t.avatar}</div>\n          <div class="member-info-detail">\n            <div class="member-name-detail">${t.name}</div>\n            <div class="member-email-detail">${t.email}</div>\n            <div class="member-role-detail">\n              <span class="role-badge ${t.isOwner?"role-owner":"role-member"}">\n                ${t.role}\n              </span>\n              ${t.isCurrentUser?'<span class="current-badge">Tú</span>':""}\n            </div>\n          </div>\n          <div class="member-access-indicator">\n            <i class="fas fa-eye" title="Acceso al perfil disponible"></i>\n          </div>\n        </div>\n      `}return i}viewMemberProfile(a,e){const n=this.groups.find(a=>a.id===e);if(!n)return void this.showNotification("❌ Grupo no encontrado","error");const t=this.getMemberData(a,e);t?this.showMemberProfileModal(t,n):this.showNotification("❌ Miembro no encontrado","error")}getMemberData(a,e){return{[`${e}_member_0`]:{id:"user_001",name:"Ana García",displayName:"Ana García (Tú)",avatar:"👩‍💼",email:"ana@email.com",phone:"+504 9999-1111",role:"Coordinador",isCurrentUser:!0,joinDate:"2024-11-20",trustScore:96,completedTandas:12,totalContributed:36e3,groupsCount:3,location:"Tegucigalpa Norte",bio:"Coordinadora con experiencia en grupos familiares. Enfocada en el ahorro responsable.",achievements:["🏆 Coordinadora Estrella","💎 Confianza Total","🎯 Meta 100% Cumplida"],lastActivity:"2025-01-21",status:"online"},[`${e}_member_1`]:{id:"user_002",name:"Carlos López",displayName:"Carlos López",avatar:"👨‍💻",email:"carlos@email.com",phone:"+504 9999-2222",role:"Miembro",isCurrentUser:!1,joinDate:"2024-12-01",trustScore:89,completedTandas:5,totalContributed:15e3,groupsCount:2,location:"Tegucigalpa Centro",bio:"Profesional en TI interesado en inversiones grupales y ahorro sistemático.",achievements:["💻 Tech Leader","🤝 Buen Colaborador"],lastActivity:"2025-01-20",status:"offline"},[`${e}_member_2`]:{id:"user_003",name:"María Rodriguez",displayName:"María Rodriguez",avatar:"👩‍🏫",email:"maria@email.com",phone:"+504 9999-3333",role:"Miembro",isCurrentUser:!1,joinDate:"2024-12-05",trustScore:92,completedTandas:8,totalContributed:24e3,groupsCount:2,location:"Comayagüela",bio:"Educadora comprometida con el crecimiento financiero familiar.",achievements:["🎓 Mentora Financiera","📚 Educadora"],lastActivity:"2025-01-21",status:"online"}}[a]||null}showMemberProfileModal(a,e){const n="online"===a.status?"🟢":"⚪",t="online"===a.status?"En línea ahora":"Última vez: "+a.lastActivity;this.createModal("member-profile",`👤 Perfil de ${a.name}`,`\n      <div class="member-profile-container">\n        <div class="member-profile-header">\n          <div class="member-avatar-large">${a.avatar}</div>\n          <div class="member-profile-info">\n            <h3>${a.displayName}</h3>\n            <div class="member-status">\n              <span class="status-indicator">${n}</span>\n              <span class="status-text">${t}</span>\n            </div>\n            <div class="member-role-main">\n              <span class="role-badge-large ${"Coordinador"===a.role?"role-owner":"role-member"}">\n                ${a.role} en ${e.name}\n              </span>\n            </div>\n          </div>\n          <div class="trust-score-display">\n            <div class="trust-circle">\n              <span class="trust-number">${a.trustScore}%</span>\n            </div>\n            <span class="trust-label">Confianza</span>\n          </div>\n        </div>\n        <div class="member-profile-stats">\n          <div class="stat-card">\n            <div class="stat-value">${a.completedTandas}</div>\n            <div class="stat-label">Tandas Completadas</div>\n          </div>\n          <div class="stat-card">\n            <div class="stat-value">L. ${a.totalContributed.toLocaleString()}</div>\n            <div class="stat-label">Total Contribuido</div>\n          </div>\n          <div class="stat-card">\n            <div class="stat-value">${a.groupsCount}</div>\n            <div class="stat-label">Grupos Activos</div>\n          </div>\n        </div>\n        <div class="member-profile-details">\n          <div class="detail-section">\n            <h5><i class="fas fa-user"></i> Información Personal</h5>\n            <div class="detail-grid">\n              <div class="detail-item">\n                <span class="detail-label">Email:</span>\n                <span class="detail-value">${a.email}</span>\n              </div>\n              <div class="detail-item">\n                <span class="detail-label">Teléfono:</span>\n                <span class="detail-value">${a.phone}</span>\n              </div>\n              <div class="detail-item">\n                <span class="detail-label">Ubicación:</span>\n                <span class="detail-value">${a.location}</span>\n              </div>\n              <div class="detail-item">\n                <span class="detail-label">Miembro desde:</span>\n                <span class="detail-value">${new Date(a.joinDate).toLocaleDateString("es-HN")}</span>\n              </div>\n            </div>\n          </div>\n          <div class="detail-section">\n            <h5><i class="fas fa-quote-left"></i> Biografía</h5>\n            <p class="member-bio">${a.bio}</p>\n          </div>\n          <div class="detail-section">\n            <h5><i class="fas fa-trophy"></i> Logros</h5>\n            <div class="achievements-list">\n              ${a.achievements.map(a=>`\n                <span class="achievement-badge">${a}</span>\n              `).join("")}\n            </div>\n          </div>\n        </div>\n        ${a.isCurrentUser?'\n        <div class="current-user-note">\n          <i class="fas fa-info-circle"></i>\n          <span>Este es tu perfil tal como lo ven otros miembros del grupo</span>\n        </div>\n        ':`\n        <div class="member-actions">\n          <button class="btn btn-primary" onclick="advancedGroupsSystem.sendMessageToMember('${a.id}')">\n            <i class="fas fa-envelope"></i> Enviar Mensaje\n          </button>\n          <button class="btn btn-info" onclick="advancedGroupsSystem.viewMemberActivity('${a.id}', '${e.id}')">\n            <i class="fas fa-chart-line"></i> Ver Actividad\n          </button>\n        </div>\n        `}\n      </div>\n    `,!0)}sendMessageToMember(a){this.showNotification("💬 Función de mensajería en desarrollo","info")}viewMemberActivity(a,e){this.showNotification("📊 Función de actividad en desarrollo","info")}renderSettingsManagement(a){return`\n      <div class="settings-management">\n        <div class="setting-section">\n          <h5>Información Básica</h5>\n          <div class="form-group">\n            <label>Nombre del Grupo</label>\n            <input type="text" class="form-control" value="${a.name}" id="group-name-edit">\n          </div>\n          <div class="form-group">\n            <label>Descripción</label>\n            <textarea class="form-control" id="group-description-edit">${a.description}</textarea>\n          </div>\n        </div>\n        <div class="setting-section">\n          <h5>Configuración Financiera</h5>\n          <div class="form-row">\n            <div class="form-group">\n              <label>Contribución Base (L.)</label>\n              <input type="number" class="form-control" value="${a.contribution}" id="group-contribution-edit">\n            </div>\n            <div class="form-group">\n              <label>Máximo Miembros</label>\n              <input type="number" class="form-control" value="${a.maxMembers}" id="group-max-members-edit">\n            </div>\n          </div>\n        </div>\n        <div class="setting-section">\n          <h5>Configuración Avanzada</h5>\n          <div class="checkbox-group">\n            <label class="checkbox-option">\n              <input type="checkbox" checked> Permitir retiros anticipados\n              <span class="checkbox-custom"></span>\n              <span>Los miembros pueden retirar antes del ciclo completo</span>\n            </label>\n            <label class="checkbox-option">\n              <input type="checkbox" checked> Aplicar multas por retrasos\n              <span class="checkbox-custom"></span>\n              <span>Cobrar multa automática por pagos tardíos</span>\n            </label>\n            <label class="checkbox-option">\n              <input type="checkbox"> Requerir aprobación para nuevos miembros\n              <span class="checkbox-custom"></span>\n              <span>Los administradores deben aprobar nuevos miembros</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    `}updateModalActions(a,e){const n=document.querySelector(".modal-actions");if(n)switch(e){case"settings":n.innerHTML=`\n          <button class="btn btn-success" onclick="advancedGroupsSystem.saveGroupChanges('${a}')">\n            <i class="fas fa-save"></i> Guardar Cambios\n          </button>\n          <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n            <i class="fas fa-times"></i> Cerrar\n          </button>\n        `;break;case"members":n.innerHTML=`\n          <button class="btn btn-primary" onclick="advancedGroupsSystem.inviteMembers('${a}')">\n            <i class="fas fa-user-plus"></i> Invitar Miembros\n          </button>\n          <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n            <i class="fas fa-times"></i> Cerrar\n          </button>\n        `;break;default:n.innerHTML='\n          <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n            <i class="fas fa-times"></i> Cerrar\n          </button>\n        '}}renderFinancesManagement(a){return`\n      <div class="finances-management">\n        <div class="finance-overview">\n          <div class="finance-stats-grid">\n            <div class="finance-stat">\n              <div class="stat-icon"><i class="fas fa-piggy-bank"></i></div>\n              <div class="stat-info">\n                <span class="stat-value">L. ${(a.totalSavings||0).toLocaleString()}</span>\n                <span class="stat-label">Total Acumulado</span>\n              </div>\n            </div>\n            <div class="finance-stat">\n              <div class="stat-icon"><i class="fas fa-calendar-check"></i></div>\n              <div class="stat-info">\n                <span class="stat-value">${Math.round(a.performance||0)}%</span>\n                <span class="stat-label">Tasa de Pago</span>\n              </div>\n            </div>\n            <div class="finance-stat">\n              <div class="stat-icon"><i class="fas fa-exclamation-triangle"></i></div>\n              <div class="stat-info">\n                <span class="stat-value">0</span>\n                <span class="stat-label">Pagos Pendientes</span>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class="finance-actions">\n          <h5>Acciones Financieras</h5>\n          <div class="action-buttons">\n            <button class="btn btn-primary" onclick="advancedGroupsSystem.recordPayment('${a.id}')">\n              <i class="fas fa-money-bill-wave"></i> Registrar Pago\n            </button>\n            <button class="btn btn-info" onclick="advancedGroupsSystem.generateFinanceReport('${a.id}')">\n              <i class="fas fa-chart-bar"></i> Generar Reporte\n            </button>\n            <button class="btn btn-warning" onclick="advancedGroupsSystem.sendPaymentReminders('${a.id}')">\n              <i class="fas fa-bell"></i> Enviar Recordatorios\n            </button>\n          </div>\n        </div>\n        <div class="recent-transactions">\n          <h5>Transacciones Recientes</h5>\n          <div class="transactions-list">\n            ${this.generateRecentTransactions(a)}\n          </div>\n        </div>\n      </div>\n    `}isNewGroup(a){const e=new Date(a.created_at||a.createdAt||Date.now());return(Date.now()-e.getTime())/864e5<=7||0===(a.totalSavings||a.total_amount_collected||0)||a.members<=1||a.member_count<=1}isExampleGroup(a){return["group_001","group_002","group_ce8b59b2d5c97212"].includes(a.id)||["Grupo Ahorro Familiar","Emprendedores Unidos"].includes(a.name)}generateRecentTransactions(a){return this.isNewGroup(a)?'\n        <div class="empty-transactions">\n          <div class="empty-icon">📊</div>\n          <p>No hay transacciones aún</p>\n          <span class="empty-subtitle">Las transacciones aparecerán cuando los miembros realicen pagos</span>\n        </div>\n      ':(this.isExampleGroup(a)?[{type:"payment",member:"Carlos López",amount:1500,date:"2025-01-08",status:"completed"},{type:"payment",member:"María Rodriguez",amount:1500,date:"2025-01-07",status:"completed"},{type:"penalty",member:"Juan Pérez",amount:50,date:"2025-01-06",status:"completed"},{type:"payment",member:"Sofia Martínez",amount:1500,date:"2025-01-05",status:"completed"}]:[]).map(a=>`\n      <div class="transaction-item">\n        <div class="transaction-icon ${a.type}">\n          <i class="fas fa-${"payment"===a.type?"money-bill-wave":"exclamation-triangle"}"></i>\n        </div>\n        <div class="transaction-details">\n          <div class="transaction-description">\n            ${"payment"===a.type?"Pago recibido":"Multa aplicada"} - ${a.member}\n          </div>\n          <div class="transaction-date">${new Date(a.date).toLocaleDateString("es-HN")}</div>\n        </div>\n        <div class="transaction-amount ${a.type}">\n          ${"payment"===a.type?"+":"-"}L. ${a.amount.toLocaleString()}\n        </div>\n      </div>\n    `).join("")}renderNotificationsManagement(a){return`\n      <div class="notifications-management">\n        <div class="notification-settings">\n          <h5>Configuración de Notificaciones</h5>\n          <div class="notification-options">\n            <div class="notification-item">\n              <div class="notification-info">\n                <h6>Recordatorios de Pago</h6>\n                <p>Notificar a los miembros 3 días antes del vencimiento</p>\n              </div>\n              <div class="notification-toggle">\n                <label class="switch">\n                <input type="checkbox" checked>\n                <span class="slider"></span>\n                </label>\n              </div>\n            </div>\n            <div class="notification-item">\n              <div class="notification-info">\n                <h6>Nuevos Miembros</h6>\n                <p>Notificar cuando alguien se une al grupo</p>\n              </div>\n              <div class="notification-toggle">\n                <label class="switch">\n                <input type="checkbox" checked>\n                <span class="slider"></span>\n                </label>\n              </div>\n            </div>\n            <div class="notification-item">\n              <div class="notification-info">\n                <h6>Reuniones Programadas</h6>\n                <p>Recordatorios de reuniones y eventos del grupo</p>\n              </div>\n              <div class="notification-toggle">\n                <label class="switch">\n                <input type="checkbox" checked>\n                <span class="slider"></span>\n                </label>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class="bulk-notifications">\n          <h5>Enviar Notificaciones</h5>\n          <div class="bulk-notification-form">\n            <div class="form-group">\n              <label>Mensaje</label>\n              <textarea class="form-control" placeholder="Escribe tu mensaje aquí..." rows="3"></textarea>\n            </div>\n            <div class="form-group">\n              <label>Destinatarios</label>\n              <div class="checkbox-group">\n                <label class="checkbox-option">\n                <input type="checkbox" checked>\n                <span class="checkbox-custom"></span>\n                <span>Todos los miembros</span>\n                </label>\n                <label class="checkbox-option">\n                <input type="checkbox">\n                <span class="checkbox-custom"></span>\n                <span>Solo administradores</span>\n                </label>\n              </div>\n            </div>\n            <button class="btn btn-primary" onclick="advancedGroupsSystem.sendBulkNotification('${a.id}')">\n              <i class="fas fa-paper-plane"></i> Enviar Mensaje\n            </button>\n          </div>\n        </div>\n      </div>\n    `}viewGroupTandasFromGroup(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n=this.generateSimpleTandas(e);this.createModal("group-tandas-detailed",`🔄 Tandas - ${e.name}`,`\n      <div class="group-tandas-detailed-container">\n        <div class="tandas-header">\n          <div class="group-info-summary">\n            <div class="group-avatar-small">${e.avatar}</div>\n            <div class="group-details">\n              <h3>${e.name}</h3>\n              <p>${n.length} tandas activas • ${e.members} participantes</p>\n            </div>\n          </div>\n          <div class="tandas-stats-summary">\n            <div class="stat-item">\n              <span class="stat-value">L. ${this.calculateSimpleTotal(n).toLocaleString()}</span>\n              <span class="stat-label">Total Contribuido</span>\n            </div>\n            <div class="stat-item">\n              <span class="stat-value">L. ${this.calculateSimplePending(n).toLocaleString()}</span>\n              <span class="stat-label">Pagos Pendientes</span>\n            </div>\n            <div class="stat-item">\n              <span class="stat-value">${this.calculateSimpleCompletion(n)}%</span>\n              <span class="stat-label">Tasa Cumplimiento</span>\n            </div>\n          </div>\n        </div>\n        <div class="tandas-list-detailed">\n          ${n.map(a=>this.renderSimpleTanda(a,e)).join("")}\n        </div>\n        ${0===n.length?`\n          <div class="empty-state">\n            <i class="fas fa-sync-alt"></i>\n            <h4>No hay tandas activas</h4>\n            <p>Este grupo aún no ha iniciado ninguna tanda</p>\n            <button class="btn btn-primary" onclick="advancedGroupsSystem.createNewTanda('${a}')">\n              <i class="fas fa-plus"></i> Crear Primera Tanda\n            </button>\n          </div>\n        `:""}\n      </div>\n    `,!0).querySelector(".modal-actions").innerHTML=`\n      <button class="btn btn-primary" onclick="advancedGroupsSystem.exportTandasReport('${a}')">\n        <i class="fas fa-download"></i> Exportar Reporte\n      </button>\n      <button class="btn btn-success" onclick="advancedGroupsSystem.createNewTanda('${a}')">\n        <i class="fas fa-plus"></i> Nueva Tanda\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cerrar\n      </button>\n    `}generateDetailedTandas(a){const e=[],n=a.activeTandas||2;for(let t=1;t<=n;t++){const n=this.generateTandaParticipants(a);e.push({id:`tanda_${a.id}_${t}`,name:`Tanda ${t} - ${a.name}`,groupId:a.id,groupName:a.name,startDate:new Date(Date.now()-30*t*24*60*60*1e3),participants:n,currentRound:Math.min(t+2,n.length),totalRounds:n.length,roundAmount:a.contribution,status:1===t?"active":"completed",frequency:a.frequency||"monthly",nextPaymentDate:new Date(Date.now()+6048e5),completedPayments:this.generateCompletedPayments(n,t),pendingPayments:this.generatePendingPayments(n)})}return e}generateTandaParticipants(a){const e=["María González","Carlos Rodríguez","Ana Morales","Luis Hernández","Sofia Martínez","Diego López","Carmen Vargas","Roberto Silva","Patricia Ruiz","Fernando Castro","Claudia Jiménez","Miguel Torres"],n=Math.min(a.maxMembers,a.members+Math.floor(3*Math.random())),t=[];for(let s=0;s<n;s++)t.push({id:`participant_${s}`,name:e[s%e.length],role:0===s?"coordinator":"participant",joinDate:new Date(Date.now()-90*Math.random()*24*60*60*1e3),totalContributed:a.contribution*(Math.floor(3*Math.random())+1),paymentStatus:Math.random()>.1?"up_to_date":"pending",trustScore:75+Math.floor(25*Math.random()),position:s+1});return t}generateCompletedPayments(a,e){const n=[],t=Math.min(e+1,a.length-1);for(let e=1;e<=t;e++){const s=a[e-1],i=a.map(n=>({participantId:n.id,participantName:n.name,amount:"coordinator"===n.role?1500*a.length:1500,date:new Date(Date.now()-30*(t-e+1)*24*60*60*1e3),status:"completed",round:e,recipient:s.name}));n.push(...i)}return n}generatePendingPayments(a){return a.filter(a=>"pending"===a.paymentStatus).map(a=>({participantId:a.id,participantName:a.name,amount:1500,dueDate:new Date(Date.now()+6048e5),status:"pending",daysOverdue:Math.random()>.5?Math.floor(5*Math.random()):0}))}calculateTotalContributions(a){return a.reduce((a,e)=>a+e.completedPayments.reduce((a,e)=>a+e.amount,0),0)}calculatePendingPayments(a){return a.reduce((a,e)=>a+e.pendingPayments.reduce((a,e)=>a+e.amount,0),0)}calculateCompletionRateForTandas(a){if(!a||0===a.length)return 0;const e=a.reduce((a,e)=>a+(e.completedPayments?.length||0)+(e.pendingPayments?.length||0),0),n=a.reduce((a,e)=>a+(e.completedPayments?.length||0),0);return e>0?Math.round(n/e*100):0}renderDetailedTanda(a,e){const n=a.participants[a.currentRound-1],t=a.currentRound/a.totalRounds*100;return`\n      <div class="tanda-card-detailed">\n        <div class="tanda-header">\n          <div class="tanda-info">\n            <h4>${a.name}</h4>\n            <div class="tanda-meta">\n              <span class="tanda-status status-${a.status}">${"active"===a.status?"Activa":"Completada"}</span>\n              <span class="tanda-frequency">${"monthly"===a.frequency?"Mensual":"Semanal"}</span>\n            </div>\n          </div>\n          <div class="tanda-progress">\n            <div class="progress-circle">\n              <div class="progress-value">${Math.round(t)}%</div>\n            </div>\n          </div>\n        </div>\n        <div class="tanda-stats">\n          <div class="stat-group">\n            <span class="stat-label">Ronda Actual</span>\n            <span class="stat-value">${a.currentRound}/${a.totalRounds}</span>\n          </div>\n          <div class="stat-group">\n            <span class="stat-label">Monto por Ronda</span>\n            <span class="stat-value">L. ${a.roundAmount.toLocaleString()}</span>\n          </div>\n          <div class="stat-group">\n            <span class="stat-label">Total Recaudado</span>\n            <span class="stat-value">L. ${a.completedPayments.reduce((a,e)=>a+e.amount,0).toLocaleString()}</span>\n          </div>\n        </div>\n        ${"active"===a.status?`\n          <div class="current-round">\n            <h5>Ronda Actual</h5>\n            <div class="recipient-info">\n              <span class="recipient-avatar">${n?.name?.charAt(0)||"U"}</span>\n              <div class="recipient-details">\n                <strong>${n?.name||"Por determinar"}</strong>\n                <p>Recibirá: L. ${(a.roundAmount*a.participants.length).toLocaleString()}</p>\n              </div>\n            </div>\n            ${a.pendingPayments.length>0?`\n              <div class="pending-alert">\n                <i class="fas fa-exclamation-triangle"></i>\n                ${a.pendingPayments.length} pago(s) pendiente(s)\n              </div>\n            `:""}\n          </div>\n        `:""}\n        <div class="participants-summary">\n          <h5>Participantes (${a.participants.length})</h5>\n          <div class="participants-grid">\n            ${a.participants.map(a=>`\n              <div class="participant-item">\n                <div class="participant-avatar">${a.name.charAt(0)}</div>\n                <div class="participant-info">\n                <span class="participant-name">${a.name}</span>\n                <span class="participant-role">${"coordinator"===a.role?"Coordinador":"Participante"}</span>\n                <span class="participant-status status-${a.paymentStatus}">\n                ${"up_to_date"===a.paymentStatus?"✅ Al día":"⏰ Pendiente"}\n                </span>\n                </div>\n                <div class="participant-stats">\n                <div class="trust-score">\n                <span class="score-value">${a.trustScore}%</span>\n                <span class="score-label">Confianza</span>\n                </div>\n                </div>\n              </div>\n            `).join("")}\n          </div>\n        </div>\n        <div class="tanda-actions">\n          <button class="btn btn-outline btn-sm" onclick="advancedGroupsSystem.viewTandaDetails('${a.id}')">\n            <i class="fas fa-eye"></i> Ver Detalles\n          </button>\n          ${"active"===a.status?`\n            <button class="btn btn-primary btn-sm" onclick="advancedGroupsSystem.manageTandaPayments('${a.id}')">\n              <i class="fas fa-money-bill"></i> Gestionar Pagos\n            </button>\n          `:""}\n          <button class="btn btn-secondary btn-sm" onclick="advancedGroupsSystem.exportTandaData('${a.id}')">\n            <i class="fas fa-download"></i> Exportar\n          </button>\n        </div>\n      </div>\n    `}manageTandaPayments(a){const e=this.generateTandaPaymentData(a),n=this.createModal("tanda-payments",`💰 Gestión de Pagos - ${e.name}`,`\n      <div class="tanda-payments-container">\n        \x3c!-- Header con información de la tanda --\x3e\n        <div class="tanda-payment-header">\n          <div class="tanda-info">\n            <h3>${e.name}</h3>\n            <div class="tanda-meta">\n              <span class="badge badge-${"active"===e.status?"success":"warning"}">\n                ${"active"===e.status?"Activa":"Completada"}\n              </span>\n              <span>Contribución: L. ${e.contribution.toLocaleString()}</span>\n              <span>Período: ${e.currentPeriod}/${e.totalPeriods}</span>\n            </div>\n          </div>\n          <div class="payment-summary">\n            <div class="summary-card">\n              <span class="summary-label">Total Recaudado</span>\n              <span class="summary-value text-success">L. ${e.totalCollected.toLocaleString()}</span>\n            </div>\n            <div class="summary-card">\n              <span class="summary-label">Pendiente</span>\n              <span class="summary-value text-warning">L. ${e.totalPending.toLocaleString()}</span>\n            </div>\n            <div class="summary-card">\n              <span class="summary-label">% Completado</span>\n              <span class="summary-value">${e.completionPercentage}%</span>\n            </div>\n          </div>\n        </div>\n        \x3c!-- Filtros y acciones rápidas --\x3e\n        <div class="payment-controls">\n          <div class="filter-controls">\n            <select class="form-control" onchange="advancedGroupsSystem.filterPaymentsByStatus(this.value)">\n              <option value="all">Todos los estados</option>\n              <option value="paid">Pagados</option>\n              <option value="pending">Pendientes</option>\n              <option value="overdue">Atrasados</option>\n            </select>\n            <select class="form-control" onchange="advancedGroupsSystem.filterPaymentsByPeriod(this.value)">\n              <option value="current">Período actual</option>\n              <option value="all">Todos los períodos</option>\n              <option value="1">Período 1</option>\n              <option value="2">Período 2</option>\n              <option value="3">Período 3</option>\n            </select>\n          </div>\n          <div class="action-controls">\n            <button class="btn btn-primary btn-sm" onclick="advancedGroupsSystem.recordPayment('${a}')">\n              <i class="fas fa-plus"></i> Registrar Pago\n            </button>\n            <button class="btn btn-outline btn-sm" onclick="advancedGroupsSystem.sendPaymentReminders('${a}')">\n              <i class="fas fa-bell"></i> Recordatorios\n            </button>\n            <button class="btn btn-success btn-sm" onclick="advancedGroupsSystem.processDistribution('${a}')">\n              <i class="fas fa-hand-holding-usd"></i> Procesar Reparto\n            </button>\n          </div>\n        </div>\n        \x3c!-- Tabla de pagos por miembro --\x3e\n        <div class="payments-table-container">\n          <table class="payments-table">\n            <thead>\n              <tr>\n                <th>Miembro</th>\n                <th>Período Actual</th>\n                <th>Total Contribuido</th>\n                <th>Estado</th>\n                <th>Último Pago</th>\n                <th>Acciones</th>\n              </tr>\n            </thead>\n            <tbody id="payments-table-body">\n              ${e.members.map(e=>`\n                <tr class="payment-row ${e.status}" data-member-id="${e.id}">\n                <td>\n                <div class="member-info">\n                <div class="member-avatar">${e.avatar}</div>\n                <div class="member-details">\n                <span class="member-name">${e.name}</span>\n                ${e.isCurrentUser?'<span class="current-user-badge">Tú</span>':""}\n                ${e.isCoordinator?'<span class="coordinator-badge">Coordinador</span>':""}\n                </div>\n                </div>\n                </td>\n                <td>\n                <div class="payment-status">\n                <span class="payment-amount ${e.currentPayment.status}">\n                L. ${e.currentPayment.amount.toLocaleString()}\n                </span>\n                <span class="payment-date">${e.currentPayment.date||"Pendiente"}</span>\n                </div>\n                </td>\n                <td>\n                <span class="total-contributed">L. ${e.totalContributed.toLocaleString()}</span>\n                <small class="contribution-percentage">${e.contributionPercentage}% completo</small>\n                </td>\n                <td>\n                <span class="status-badge status-${e.status}">\n                ${"paid"===e.status?"Al día":"pending"===e.status?"Pendiente":"overdue"===e.status?"Atrasado":"Parcial"}\n                </span>\n                </td>\n                <td>\n                <span class="last-payment">${e.lastPayment}</span>\n                </td>\n                <td>\n                <div class="payment-actions">\n                ${"paid"!==e.status?`\n                <button class="btn btn-sm btn-success" onclick="advancedGroupsSystem.markAsPaid('${e.id}', '${a}')" title="Marcar como pagado">\n                <i class="fas fa-check"></i>\n                </button>\n                `:""}\n                <button class="btn btn-sm btn-outline" onclick="advancedGroupsSystem.viewMemberPaymentHistory('${e.id}', '${a}')" title="Ver historial">\n                <i class="fas fa-history"></i>\n                </button>\n                ${"overdue"===e.status?`\n                <button class="btn btn-sm btn-warning" onclick="advancedGroupsSystem.sendPersonalReminder('${e.id}', '${a}')" title="Enviar recordatorio">\n                <i class="fas fa-exclamation-triangle"></i>\n                </button>\n                `:""}\n                </div>\n                </td>\n                </tr>\n              `).join("")}\n            </tbody>\n          </table>\n        </div>\n        \x3c!-- Resumen de períodos --\x3e\n        <div class="periods-summary">\n          <h4><i class="fas fa-calendar-alt"></i> Historial de Períodos</h4>\n          <div class="periods-timeline">\n            ${e.periodsHistory.map(a=>`\n              <div class="period-item ${a.status}">\n                <div class="period-number">${a.number}</div>\n                <div class="period-info">\n                <span class="period-date">${a.date}</span>\n                <span class="period-beneficiary">Beneficiario: ${a.beneficiary}</span>\n                <span class="period-amount">L. ${a.amount.toLocaleString()}</span>\n                </div>\n                <div class="period-status">\n                <span class="status-badge status-${a.status}">\n                ${"completed"===a.status?"Completado":"current"===a.status?"Actual":"Pendiente"}\n                </span>\n                </div>\n              </div>\n            `).join("")}\n          </div>\n        </div>\n      </div>\n    `,!0);n.style.maxWidth="1200px",n.querySelector(".modal-actions").innerHTML=`\n      <button class="btn btn-primary" onclick="advancedGroupsSystem.exportPaymentReport('${a}')">\n        <i class="fas fa-file-excel"></i> Exportar Reporte\n      </button>\n      <button class="btn btn-outline" onclick="advancedGroupsSystem.printPaymentSummary('${a}')">\n        <i class="fas fa-print"></i> Imprimir\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cerrar\n      </button>\n    `}generateTandaPaymentData(a){const e=["Tanda Familiar","Tanda Profesional","Tanda Emprendedores"],n=e[Math.floor(Math.random()*e.length)],t=[1e3,1500,2e3,2500][Math.floor(4*Math.random())],s=[{name:"Ana García (Tú)",avatar:"👩‍💼",isCurrentUser:!0,isCoordinator:!0},{name:"Carlos López",avatar:"👨‍💻",isCurrentUser:!1,isCoordinator:!1},{name:"María Rodríguez",avatar:"👩‍🏫",isCurrentUser:!1,isCoordinator:!1},{name:"Juan Pérez",avatar:"👨‍⚕️",isCurrentUser:!1,isCoordinator:!1},{name:"Sofia Martínez",avatar:"👩‍🎨",isCurrentUser:!1,isCoordinator:!1},{name:"Luis González",avatar:"👨‍🔧",isCurrentUser:!1,isCoordinator:!1},{name:"Carmen Ruiz",avatar:"👩‍⚖️",isCurrentUser:!1,isCoordinator:!1},{name:"Diego Torres",avatar:"👨‍🎯",isCurrentUser:!1,isCoordinator:!1}],i=["paid","pending","overdue","partial"],o=s.map((a,e)=>{const n=Math.max(1,3-Math.floor(2*Math.random())),s=0===e?"paid":i[Math.floor(Math.random()*i.length)],o=n*t,r=Math.round(o/(8*t)*100);return{id:`member_${e}`,name:a.name,avatar:a.avatar,isCurrentUser:a.isCurrentUser,isCoordinator:a.isCoordinator,status:s,currentPayment:{amount:"paid"===s?t:"partial"===s?.5*t:0,status:s,date:"paid"===s?"2024-08-15":null},totalContributed:o,contributionPercentage:r,lastPayment:"pending"===s?"Nunca":"2024-08-15"}}),r=o.reduce((a,e)=>a+e.totalContributed,0),c=8*t*3,l=c-r,d=Math.round(r/c*100),p=[];for(let a=1;a<=8;a++){const e=s[a-1]?.name||`Miembro ${a}`;p.push({number:a,date:a<3?`2024-0${6+a}-15`:3===a?"2024-08-15 (Actual)":"Pendiente",beneficiary:e,amount:8*t,status:a<3?"completed":3===a?"current":"pending"})}return{id:a,name:n,contribution:t,currentPeriod:3,totalPeriods:8,status:"active",totalCollected:r,totalPending:l,completionPercentage:d,members:o,periodsHistory:p}}markAsPaid(a,e){this.showNotification("success","Pago registrado exitosamente"),this.manageTandaPayments(e)}viewMemberPaymentHistory(a,e){this.createModal("payment-history","📊 Historial de Pagos",`\n      <div class="payment-history-container">\n        <div class="member-header">\n          <div class="member-avatar">👨‍💻</div>\n          <div class="member-info">\n            <h3>Carlos López</h3>\n            <p>Miembro desde: Enero 2024</p>\n          </div>\n        </div>\n        <div class="payment-timeline">\n          ${[{date:"2024-08-15",amount:1500,status:"paid",period:3},{date:"2024-07-15",amount:1500,status:"paid",period:2},{date:"2024-06-15",amount:1500,status:"paid",period:1}].map(a=>`\n            <div class="timeline-item">\n              <div class="timeline-marker ${a.status}"></div>\n              <div class="timeline-content">\n                <div class="payment-details">\n                <span class="payment-amount">L. ${a.amount.toLocaleString()}</span>\n                <span class="payment-period">Período ${a.period}</span>\n                </div>\n                <div class="payment-date">${a.date}</div>\n                <div class="payment-status status-${a.status}">\n                ${"paid"===a.status?"Pagado":"Pendiente"}\n                </div>\n              </div>\n            </div>\n          `).join("")}\n        </div>\n      </div>\n    `,!0).querySelector(".modal-actions").innerHTML='\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cerrar\n      </button>\n    '}recordPayment(a){this.createModal("record-payment","💰 Registrar Nuevo Pago",`\n      <div class="record-payment-container">\n        <form class="payment-form">\n          <div class="form-group">\n            <label>Miembro</label>\n            <select class="form-control" required>\n              <option value="">Seleccionar miembro...</option>\n              <option value="member_1">Carlos López</option>\n              <option value="member_2">María Rodríguez</option>\n              <option value="member_3">Juan Pérez</option>\n            </select>\n          </div>\n          <div class="form-group">\n            <label>Monto</label>\n            <input type="number" class="form-control" placeholder="1500" required>\n          </div>\n          <div class="form-group">\n            <label>Fecha de Pago</label>\n            <input type="date" class="form-control" value="${(new Date).toISOString().split("T")[0]}" required>\n          </div>\n          <div class="form-group">\n            <label>Método de Pago</label>\n            <select class="form-control" required>\n              <option value="cash">Efectivo</option>\n              <option value="transfer">Transferencia</option>\n              <option value="mobile">Pago móvil</option>\n            </select>\n          </div>\n          <div class="form-group">\n            <label>Notas (opcional)</label>\n            <textarea class="form-control" rows="3" placeholder="Agregar observaciones..."></textarea>\n          </div>\n        </form>\n      </div>\n    `,!0).querySelector(".modal-actions").innerHTML=`\n      <button class="btn btn-primary" onclick="advancedGroupsSystem.savePaymentRecord('${a}')">\n        <i class="fas fa-save"></i> Registrar Pago\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cancelar\n      </button>\n    `}savePaymentRecord(a){this.showNotification("success","Pago registrado exitosamente"),this.closeModal(),setTimeout(()=>this.manageTandaPayments(a),300)}makePayment(a){this.createModal("make-payment","💳 Realizar Pago",'\n      <div class="payment-form-container">\n        <div class="payment-summary">\n          <h4>Resumen de Pago</h4>\n          <div class="payment-details">\n            <div class="detail-row">\n              <span>Monto a pagar:</span>\n              <strong>L. 1,500.00</strong>\n            </div>\n            <div class="detail-row">\n              <span>Período:</span>\n              <strong>Febrero 2025</strong>\n            </div>\n            <div class="detail-row">\n              <span>Fecha límite:</span>\n              <strong>2025-02-05</strong>\n            </div>\n          </div>\n        </div>\n        <div class="payment-methods">\n          <h4>Método de Pago</h4>\n          <div class="payment-options">\n            <div class="payment-option">\n              <input type="radio" id="bank-transfer" name="payment-method" value="bank" checked>\n              <label for="bank-transfer">\n                <i class="fas fa-university"></i>\n                <span>Transferencia Bancaria</span>\n              </label>\n            </div>\n            <div class="payment-option">\n              <input type="radio" id="mobile-wallet" name="payment-method" value="mobile">\n              <label for="mobile-wallet">\n                <i class="fas fa-mobile-alt"></i>\n                <span>Billetera Móvil</span>\n              </label>\n            </div>\n            <div class="payment-option">\n              <input type="radio" id="cash" name="payment-method" value="cash">\n              <label for="cash">\n                <i class="fas fa-money-bill"></i>\n                <span>Efectivo</span>\n              </label>\n            </div>\n          </div>\n        </div>\n        <div class="payment-notes">\n          <label for="payment-note">Nota (opcional):</label>\n          <textarea id="payment-note" placeholder="Agregar nota sobre este pago..."></textarea>\n        </div>\n      </div>\n    ',!0).querySelector(".modal-actions").innerHTML=`\n      <button class="btn btn-outline" onclick="advancedGroupsSystem.closeModal()">Cancelar</button>\n      <button class="btn btn-success" onclick="advancedGroupsSystem.confirmPayment('${a}')">\n        <i class="fas fa-credit-card"></i>\n        Confirmar Pago\n      </button>\n    `}confirmPayment(a){this.closeModal(),this.showNotification("success","💳 Pago procesado exitosamente"),setTimeout(()=>{this.showNotification("info","📧 Comprobante enviado por correo")},2e3)}processDistribution(a){this.createModal("process-distribution","🎯 Procesar Reparto de Tanda",'\n      <div class="distribution-container">\n        <div class="distribution-warning">\n          <i class="fas fa-exclamation-triangle"></i>\n          <p>Estás a punto de procesar el reparto del período actual. Esta acción no se puede deshacer.</p>\n        </div>\n        <div class="distribution-details">\n          <div class="detail-item">\n            <span class="label">Beneficiario del período:</span>\n            <span class="value">Ana García (Tú)</span>\n          </div>\n          <div class="detail-item">\n            <span class="label">Monto total a recibir:</span>\n            <span class="value">L. 12,000</span>\n          </div>\n          <div class="detail-item">\n            <span class="label">Contribuciones recibidas:</span>\n            <span class="value">7 de 8 miembros</span>\n          </div>\n          <div class="detail-item">\n            <span class="label">Monto pendiente:</span>\n            <span class="value text-warning">L. 1,500</span>\n          </div>\n        </div>\n        <div class="distribution-options">\n          <label class="checkbox-option">\n            <input type="radio" name="distribution_type" value="full" checked>\n            <span>Procesar con el monto completo (esperar pagos pendientes)</span>\n          </label>\n          <label class="checkbox-option">\n            <input type="radio" name="distribution_type" value="partial">\n            <span>Procesar con el monto actual (L. 10,500)</span>\n          </label>\n        </div>\n      </div>\n    ',!0).querySelector(".modal-actions").innerHTML=`\n      <button class="btn btn-success" onclick="advancedGroupsSystem.confirmDistribution('${a}')">\n        <i class="fas fa-check"></i> Confirmar Reparto\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cancelar\n      </button>\n    `}confirmDistribution(a){this.showNotification("success","Reparto procesado exitosamente"),this.closeModal(),this.addActivity("tanda","Reparto de tanda procesado","just-now")}filterPaymentsByStatus(a){document.querySelectorAll(".payment-row").forEach(e=>{"all"===a||e.classList.contains(a)?e.style.display="":e.style.display="none"})}filterPaymentsByPeriod(a){this.showNotification("info",`Filtro aplicado: Período ${a}`)}exportPaymentReport(a){this.showNotification("success","Reporte de pagos exportado exitosamente"),this.addActivity("export","Reporte de pagos exportado","just-now")}printPaymentSummary(a){window.print(),this.addActivity("print","Resumen de pagos impreso","just-now")}sendPersonalReminder(a,e){this.showNotification("success","Recordatorio enviado exitosamente"),this.addActivity("notification","Recordatorio de pago enviado","just-now")}viewGroupTandas(a){const e=this.groups.find(e=>e.id===a);e&&(this.createModal("group-tandas",`🔄 Tandas: ${e.name}`,`\n      <div class="group-tandas-container">\n        <div class="tandas-header">\n          <div class="tandas-stats">\n            <div class="stat-item">\n              <span class="stat-value">3</span>\n              <span class="stat-label">Tandas Activas</span>\n            </div>\n            <div class="stat-item">\n              <span class="stat-value">2</span>\n              <span class="stat-label">Completadas</span>\n            </div>\n            <div class="stat-item">\n              <span class="stat-value">L. ${(e.contribution*e.members).toLocaleString()}</span>\n              <span class="stat-label">Valor por Tanda</span>\n            </div>\n          </div>\n          <button class="btn btn-primary" onclick="advancedGroupsSystem.createNewTanda('${a}')">\n            <i class="fas fa-plus"></i> Nueva Tanda\n          </button>\n        </div>\n        <div class="tandas-list">\n          ${this.generateGroupTandasList(e)}\n        </div>\n      </div>\n    `).querySelector(".modal-actions").innerHTML='\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        Cerrar\n      </button>\n    ')}generateGroupTandasList(a){return[{id:1,name:"Tanda Enero 2025",status:"active",progress:75,currentRound:3,totalRounds:4,nextPayment:"2025-01-15"},{id:2,name:"Tanda Diciembre 2024",status:"completed",progress:100,currentRound:4,totalRounds:4,completedDate:"2024-12-30"},{id:3,name:"Tanda Febrero 2025",status:"upcoming",progress:0,currentRound:0,totalRounds:4,startDate:"2025-02-01"}].map(a=>`\n      <div class="tanda-item ${a.status}">\n        <div class="tanda-info">\n          <h6>${a.name}</h6>\n          <div class="tanda-progress">\n            <div class="progress-bar-small">\n              <div class="progress-fill" style="width: ${a.progress}%"></div>\n            </div>\n            <span class="progress-text">${a.progress}% completado</span>\n          </div>\n          <div class="tanda-details">\n            <span class="detail-item">\n              <i class="fas fa-sync-alt"></i>\n              Ronda ${a.currentRound}/${a.totalRounds}\n            </span>\n            ${"active"===a.status?`\n            <span class="detail-item">\n              <i class="fas fa-calendar"></i>\n              Próximo pago: ${new Date(a.nextPayment).toLocaleDateString("es-HN")}\n            </span>\n            `:""}\n            ${"completed"===a.status?`\n            <span class="detail-item">\n              <i class="fas fa-check-circle"></i>\n              Completada: ${new Date(a.completedDate).toLocaleDateString("es-HN")}\n            </span>\n            `:""}\n            ${"upcoming"===a.status?`\n            <span class="detail-item">\n              <i class="fas fa-clock"></i>\n              Inicia: ${new Date(a.startDate).toLocaleDateString("es-HN")}\n            </span>\n            `:""}\n          </div>\n        </div>\n        <div class="tanda-actions">\n          <button class="btn btn-sm btn-primary" onclick="advancedGroupsSystem.viewTandaDetails('${a.id}')">\n            <i class="fas fa-eye"></i> Ver Detalles\n          </button>\n          ${"active"===a.status?`\n          <button class="btn btn-sm btn-success" onclick="advancedGroupsSystem.recordTandaPayment('${a.id}')">\n            <i class="fas fa-money-bill-wave"></i> Registrar Pago\n          </button>\n          `:""}\n        </div>\n      </div>\n    `).join("")}inviteMembers(a){this.showNotification("📧 Función de invitación disponible próximamente","info")}sendInvitation(a){const e=document.getElementById("invite-email")?.value;e?(this.showNotification(`✅ Invitación enviada a ${e}`,"success"),document.getElementById("invite-email").value=""):this.showNotification("⚠️ Por favor ingresa un correo electrónico","warning")}changeRole(a,e,n){const t="admin"===n?"Administrador":"Miembro";this.showNotification(`✅ Rol cambiado a ${t}`,"success")}removeMember(a,e){this.createModal("confirm-remove","⚠️ Confirmar Acción",'\n      <div class="confirmation-content">\n        <p>¿Estás seguro de que deseas remover este miembro del grupo?</p>\n        <p class="warning-text">Esta acción no se puede deshacer.</p>\n      </div>\n    ').querySelector(".modal-actions").innerHTML=`\n      <button class="btn btn-danger" onclick="advancedGroupsSystem.confirmRemoveMember('${a}', '${e}')">\n        <i class="fas fa-trash"></i> Remover\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        Cancelar\n      </button>\n    `}confirmRemoveMember(a,e){const n=this.groups.find(e=>e.id===a);n&&n.members--,this.showNotification("✅ Miembro removido del grupo","success"),this.closeModal(),setTimeout(()=>{this.manageGroup(a)},500)}async saveGroupChanges(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n=document.getElementById("group-name-edit"),t=document.getElementById("group-description-edit"),s=document.getElementById("group-contribution-edit"),i=document.getElementById("group-max-members-edit"),o={};let r=!1;if(n&&n.value!==e.name&&(o.name=n.value,e.name=n.value,r=!0),t&&t.value!==e.description&&(o.description=t.value,e.description=t.value,r=!0),s&&parseInt(s.value)!==e.contribution&&(o.contribution_amount=parseInt(s.value),e.contribution=parseInt(s.value),r=!0),i&&parseInt(i.value)!==e.maxMembers&&(o.max_members=parseInt(i.value),e.maxMembers=parseInt(i.value),r=!0),r)try{this.showNotification("⏳ Guardando cambios...","info");try{const n=await this.apiProxy.makeRequest(`/api/groups/${a}/update`,{method:"PUT",body:o});if(!n.success)throw new Error(n.error||"Error desconocido de la API");Object.assign(e,n.group),this.saveGroupsData(this.groups),this.showNotification("✅ Cambios guardados exitosamente","success")}catch(a){this.saveGroupsData(this.groups),this.showNotification("⚠️ Cambios guardados localmente (API no disponible)","warning")}this.updateDashboard(),this.closeModal(),"groups"===this.currentTab&&this.renderGroupsWithoutAPIReload()}catch(a){this.showNotification("❌ Error al guardar cambios","error")}else this.showNotification("ℹ️ No hay cambios para guardar","info")}renderGroupsWithoutAPIReload(){const a=document.getElementById("groupsList");if(!a)return;if(this.addGroupsControls(),0===this.groups.length)return void(a.innerHTML='\n        <div class="empty-state">\n          <div class="empty-icon">👥</div>\n          <h3>No tienes grupos activos</h3>\n          <p>Crea tu primer grupo o únete a uno existente para comenzar a ahorrar</p>\n          <div class="empty-actions">\n            <button class="btn btn-primary" onclick="advancedGroupsSystem.switchTab(\'create\')">\n              <i class="fas fa-plus"></i>\n              Crear Mi Primer Grupo\n            </button>\n            <button class="btn btn-secondary" onclick="advancedGroupsSystem.switchTab(\'matching\')">\n              <i class="fas fa-search"></i>\n              Buscar Grupos\n            </button>\n          </div>\n        </div>\n      ');const e=this.getFilteredGroups();a.innerHTML=e.map(a=>`\n      <div class="group-card enhanced" id="group-card-${a.id}" data-group-id="${a.id}">\n        <div class="group-card-content">\n          <div class="group-card-header">\n          <div class="group-avatar">\n            <span class="avatar-emoji">${a.avatar}</span>\n            ${a.isOwner?'<div class="owner-badge"><i class="fas fa-crown"></i></div>':""}\n          </div>\n          <div class="group-info-section">\n            <div class="group-title-row">\n              <h3 class="group-name">${a.name}</h3>\n              <div class="group-status status-${a.status}">\n                <span class="status-dot"></span>\n                ${this.getStatusLabel(a.status)}\n              </div>\n            </div>\n            <p class="group-description">${a.description}</p>\n            <div class="group-meta">\n              <span class="group-type"><i class="fas fa-tag"></i> ${this.getGroupTypeLabel(a.type)}</span>\n              <span class="group-location"><i class="fas fa-map-marker-alt"></i> ${a.location}</span>\n              <span class="group-frequency"><i class="fas fa-clock"></i> ${this.getFrequencyLabel(a.frequency)}</span>\n            </div>\n            <div class="group-roles-info">\n              ${a.isOwner?'\n                <span class="coordinator-badge">\n                <i class="fas fa-crown"></i> Eres el Coordinador\n                </span>\n              ':`\n                <span class="member-role">\n                Miembro #${Math.floor(Math.random()*a.maxMembers)+1}\n                </span>\n                <span class="coordinator-info">Coordinador: ${a.coordinatorName||"María González"}</span>\n              `}\n            </div>\n          </div>\n          </div>\n          <div class="group-card-stats">\n            <div class="stat">\n              <span class="stat-value">${a.members}/${a.maxMembers}</span>\n              <span class="stat-label">Miembros</span>\n            </div>\n            <div class="stat">\n              <span class="stat-value">L. ${(a.contribution||0).toLocaleString()}</span>\n              <span class="stat-label">Contribución</span>\n            </div>\n            <div class="stat">\n              <span class="stat-value">L. ${(a.totalSavings||0).toLocaleString()}</span>\n              <span class="stat-label">Total Ahorrado</span>\n            </div>\n            <div class="stat">\n              <span class="stat-value">${Math.round(a.performance||0)}%</span>\n              <span class="stat-label">Rendimiento</span>\n            </div>\n          </div>\n          <div class="group-card-footer">\n            <div class="group-actions">\n              <button class="btn btn-primary btn-sm btn-icon-only" onclick="advancedGroupsSystem.viewGroupDetails('${a.id}')" title="Ver Detalles">\n                <i class="fas fa-eye"></i>\n              </button>\n              ${a.isAdmin?`\n              <button class="btn btn-secondary btn-sm btn-icon-only" onclick="advancedGroupsSystem.manageGroup('${a.id}')" title="Administrar Grupo">\n                <i class="fas fa-cog"></i>\n              </button>\n              `:""}\n              <div class="dropdown" id="dropdown-container-${a.id}">\n                <button class="btn btn-ghost btn-sm dropdown-toggle" onclick="advancedGroupsSystem.toggleGroupActions('${a.id}')">\n                <i class="fas fa-ellipsis-v"></i>\n                </button>\n                <div class="dropdown-menu" id="actions-${a.id}">\n                <a href="#" onclick="advancedGroupsSystem.viewGroupTandasFromGroup('${a.id}')">\n                <i class="fas fa-sync-alt"></i> Ver Tandas (${this.getGroupTandasCount(a.id)})\n                </a>\n                <a href="#" onclick="advancedGroupsSystem.exportGroupData('${a.id}')">\n                <i class="fas fa-download"></i> Exportar Datos del Grupo\n                </a>\n                ${"active"===a.status?`\n                <a href="#" onclick="advancedGroupsSystem.shareGroup('${a.id}')">\n                <i class="fas fa-share-alt"></i> Compartir Grupo\n                </a>\n                `:""}\n                </div>\n              </div>\n            </div>\n            <div class="group-tags">\n              ${(a.tags||[]).map(a=>`<span class="group-tag">#${a}</span>`).join("")}\n            </div>\n            <div class="group-progress">\n              <div class="progress-info">\n                <span class="progress-text">${Math.round(a.members/a.maxMembers*100)}% Completo</span>\n                <span class="trust-score">${a.trustScore||85}% Confianza</span>\n              </div>\n              <div class="progress-bar">\n                <div class="progress-fill" style="width: ${Math.round(a.members/a.maxMembers*100)}%"></div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `).join("")}recordPayment(a){this.createModal("record-payment","💰 Registrar Pago",`\n      <div class="payment-form">\n        <div class="form-group">\n          <label>Miembro</label>\n          <select class="form-control" id="payment-member">\n            <option value="">Seleccionar miembro...</option>\n            <option value="carlos">Carlos López</option>\n            <option value="maria">María Rodriguez</option>\n            <option value="juan">Juan Pérez</option>\n            <option value="sofia">Sofia Martínez</option>\n          </select>\n        </div>\n        <div class="form-group">\n          <label>Monto (L.)</label>\n          <input type="number" class="form-control" id="payment-amount" value="1500">\n        </div>\n        <div class="form-group">\n          <label>Fecha</label>\n          <input type="date" class="form-control" id="payment-date" value="${(new Date).toISOString().split("T")[0]}">\n        </div>\n        <div class="form-group">\n          <label>Método de Pago</label>\n          <select class="form-control" id="payment-method">\n            <option value="cash">Efectivo</option>\n            <option value="transfer">Transferencia</option>\n            <option value="mobile">Pago Móvil</option>\n          </select>\n        </div>\n        <div class="form-group">\n          <label>Notas (opcional)</label>\n          <textarea class="form-control" id="payment-notes" placeholder="Comentarios adicionales..."></textarea>\n        </div>\n      </div>\n    `).querySelector(".modal-actions").innerHTML=`\n      <button class="btn btn-success" onclick="advancedGroupsSystem.confirmRecordPayment('${a}')">\n        <i class="fas fa-check"></i> Registrar Pago\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        Cancelar\n      </button>\n    `}confirmRecordPayment(a){const e=document.getElementById("payment-member")?.value,n=document.getElementById("payment-amount")?.value;if(!e||!n)return void this.showNotification("⚠️ Por favor completa todos los campos obligatorios","warning");const t=this.groups.find(e=>e.id===a);t&&(t.totalSavings+=parseInt(n)),this.showNotification(`✅ Pago de L. ${parseInt(n).toLocaleString()} registrado exitosamente`,"success"),this.updateDashboard(),this.closeModal()}generateFinanceReport(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n={group:e,totalPayments:e.totalSavings,paymentRate:e.performance,memberCount:e.members,generatedDate:new Date},t=`\nREPORTE FINANCIERO - ${e.name}\n===============================\nFecha de generación: ${n.generatedDate.toLocaleDateString("es-HN")}\nRESUMEN GENERAL:\n- Total recaudado: L. ${n.totalPayments.toLocaleString()}\n- Tasa de pago: ${n.paymentRate}%\n- Miembros activos: ${n.memberCount}\n- Contribución base: L. ${e.contribution.toLocaleString()}\nESTADÍSTICAS:\n- Días activo: ${this.calculateActiveDays(e.created)} días\n- Promedio mensual: L. ${Math.round(n.totalPayments/Math.max(1,this.calculateActiveDays(e.created)/30)).toLocaleString()}\n- Puntualidad: ${n.paymentRate}%\nGenerado por La Tanda Web3 Sistema\n    `,s=new Blob([t],{type:"text/plain"}),i=URL.createObjectURL(s),o=document.createElement("a");o.href=i,o.download=`reporte-${e.name.toLowerCase().replace(/\s+/g,"-")}-${(new Date).toISOString().split("T")[0]}.txt`,document.body.appendChild(o),o.click(),document.body.removeChild(o),URL.revokeObjectURL(i),this.showNotification("📊 Reporte financiero descargado","success")}sendPaymentReminders(a){this.showNotification("📧 Recordatorios de pago enviados a todos los miembros","success")}sendBulkNotification(a){const e=document.querySelector(".bulk-notification-form textarea")?.value;e.trim()?(this.showNotification("📧 Notificación enviada a todos los miembros seleccionados","success"),document.querySelector(".bulk-notification-form textarea").value=""):this.showNotification("⚠️ Por favor escribe un mensaje","warning")}createNewTanda(a){this.createModal("create-tanda","🔄 Nueva Tanda",`\n      <div class="tanda-form">\n        <div class="form-group">\n          <label>Nombre de la Tanda</label>\n          <input type="text" class="form-control" id="tanda-name" placeholder="Ej: Tanda Marzo 2025">\n        </div>\n        <div class="form-row">\n          <div class="form-group">\n            <label>Fecha de Inicio</label>\n            <input type="date" class="form-control" id="tanda-start-date" value="${(new Date).toISOString().split("T")[0]}">\n          </div>\n          <div class="form-group">\n            <label>Número de Rondas</label>\n            <input type="number" class="form-control" id="tanda-rounds" value="4" min="2" max="12">\n          </div>\n        </div>\n        <div class="form-group">\n          <label>Descripción</label>\n          <textarea class="form-control" id="tanda-description" placeholder="Describe los objetivos de esta tanda..."></textarea>\n        </div>\n        <div class="form-group">\n          <div class="checkbox-group">\n            <label class="checkbox-option">\n              <input type="checkbox" id="tanda-auto-assign" checked>\n              <span class="checkbox-custom"></span>\n              <span>Asignación automática de turnos</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    `).querySelector(".modal-actions").innerHTML=`\n      <button class="btn btn-success" onclick="advancedGroupsSystem.confirmCreateTanda('${a}')">\n        <i class="fas fa-plus"></i> Crear Tanda\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        Cancelar\n      </button>\n    `}confirmCreateTanda(a){const e=document.getElementById("tanda-name")?.value,n=document.getElementById("tanda-start-date")?.value,t=document.getElementById("tanda-rounds")?.value;e&&n&&t?(this.showNotification(`✅ Tanda "${e}" creada exitosamente`,"success"),this.closeModal(),setTimeout(()=>{this.viewGroupTandas(a)},500)):this.showNotification("⚠️ Por favor completa todos los campos obligatorios","warning")}viewTandaDetails(a){const e={id:a,name:"Tanda Enero 2025",status:"active",currentRound:3,totalRounds:4,progress:75,coordinator:"María González",groupName:"Grupo Alpha",nextWinner:"María Rodriguez",nextAmount:6e3,participants:["Ana García","Carlos López","María Rodriguez","Luis Hernández"],isUserCoordinator:Math.random()>.6,userRole:Math.random()>.6?"Coordinador":"Participante #"+(Math.floor(4*Math.random())+1)};this.createModal("tanda-details","🔍 Detalles de Tanda",`\n      <div class="tanda-details-container">\n        <div class="tanda-overview">\n          <div class="tanda-header-info">\n            <h5>${e.name}</h5>\n            <div class="tanda-status ${e.status}">${"active"===e.status?"Activa":"Inactiva"}</div>\n          </div>\n          <div class="tanda-roles-section">\n            <div class="coordinator-info">\n              <span class="role-label">\n                <i class="fas fa-crown"></i> Coordinador:\n              </span>\n              <span class="coordinator-name">${e.coordinator}</span>\n            </div>\n            <div class="user-role">\n              <span class="role-label">Tu rol:</span>\n              <span class="user-role-badge ${e.isUserCoordinator?"coordinator":"participant"}">\n                ${e.userRole}\n              </span>\n            </div>\n          </div>\n        </div>\n        <div class="tanda-progress-section">\n          <div class="progress-info">\n            <span>Progreso: Ronda ${e.currentRound} de ${e.totalRounds}</span>\n            <span>${e.progress}% completado</span>\n          </div>\n          <div class="progress-bar-large">\n            <div class="progress-fill" style="width: ${e.progress}%"></div>\n          </div>\n        </div>\n        <div class="participants-section">\n          <h6><i class="fas fa-users"></i> Participantes (${e.participants.length})</h6>\n          <div class="participants-list">\n            ${e.participants.map((a,n)=>`\n              <div class="participant-item">\n                <div class="participant-avatar">${a.charAt(0)}</div>\n                <div class="participant-info">\n                <span class="participant-name">${a}</span>\n                <span class="participant-status">\n                ${n<e.currentRound-1?'<i class="fas fa-check-circle text-success"></i> Ya cobró':n===e.currentRound-1?'<i class="fas fa-hourglass-half text-warning"></i> Próximo':'<i class="fas fa-clock text-secondary"></i> Pendiente'}\n                </span>\n                </div>\n              </div>\n            `).join("")}\n          </div>\n        </div>\n        <div class="tanda-rounds">\n          <h6>Historial de Rondas</h6>\n          <div class="rounds-list">\n            <div class="round-item completed">\n              <div class="round-info">\n                <span class="round-number">Ronda 1</span>\n                <span class="round-date">Dic 2024</span>\n              </div>\n              <div class="round-winner">\n                <span>Ganador: Ana García</span>\n                <span class="round-amount">L. 6,000</span>\n              </div>\n            </div>\n            <div class="round-item completed">\n              <div class="round-info">\n                <span class="round-number">Ronda 2</span>\n                <span class="round-date">Ene 2025</span>\n              </div>\n              <div class="round-winner">\n                <span>Ganador: Carlos López</span>\n                <span class="round-amount">L. 6,000</span>\n              </div>\n            </div>\n            <div class="round-item active">\n              <div class="round-info">\n                <span class="round-number">Ronda 3</span>\n                <span class="round-date">Feb 2025</span>\n              </div>\n              <div class="round-winner">\n                <span>Próximo: María Rodriguez</span>\n                <span class="round-amount">L. 6,000</span>\n              </div>\n            </div>\n            <div class="round-item pending">\n              <div class="round-info">\n                <span class="round-number">Ronda 4</span>\n                <span class="round-date">Mar 2025</span>\n              </div>\n              <div class="round-winner">\n                <span>Pendiente</span>\n                <span class="round-amount">L. 6,000</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `).querySelector(".modal-actions").innerHTML=`\n      <button class="btn btn-primary" onclick="advancedGroupsSystem.manageTandaRounds('${a}')">\n        <i class="fas fa-cog"></i> Gestionar Rondas\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        Cerrar\n      </button>\n    `}recordTandaPayment(a){this.showNotification("💰 Registrando pago de tanda...","info"),setTimeout(()=>{this.showNotification("✅ Pago de tanda registrado exitosamente","success")},1e3)}manageTandaRounds(a){this.showNotification("⚙️ Gestión de rondas disponible próximamente","info")}shareGroup(a){const e=this.groups.find(e=>e.id===a);e&&(this.createModal("share-group","📤 Compartir Grupo",`\n      <div class="share-group-container">\n        \x3c!-- Preview Section --\x3e\n        <div class="share-preview-section">\n          <div class="share-preview-header">\n            <i class="fas fa-eye"></i>\n            Vista Previa de Invitación\n          </div>\n          <p>Así verán tu grupo las personas invitadas</p>\n          <div class="group-preview-card">\n            <div class="preview-header">\n              <div class="preview-icon">\n                ${e.avatar}\n              </div>\n              <div class="preview-title">\n                <h4>${e.name}</h4>\n                <p>${e.description}</p>\n              </div>\n              <div class="preview-status-badge">\n                📢 ${this.getStatusLabel(e.status)}\n              </div>\n            </div>\n            <div class="preview-details">\n              <div class="preview-detail">\n                <i class="fas fa-money-bill-wave"></i>\n                <span>L. ${e.contribution.toLocaleString()} Contribución ${this.getFrequencyLabel(e.frequency)}</span>\n              </div>\n              <div class="preview-detail">\n                <i class="fas fa-users"></i>\n                <span>${e.members}/${e.maxMembers} Miembros Activos</span>\n              </div>\n              <div class="preview-detail">\n                <i class="fas fa-shield-alt"></i>\n                <span>${e.trustScore}% Score de Confianza</span>\n              </div>\n              <div class="preview-detail">\n                <i class="fas fa-map-marker-alt"></i>\n                <span>${e.location} Ubicación</span>\n              </div>\n            </div>\n            <div class="preview-footer">\n              <i class="fas fa-heart"></i>\n              <span>Powered by La Tanda Chain</span>\n            </div>\n          </div>\n        </div>\n        \x3c!-- Share Methods Section --\x3e\n        <div class="share-methods-section">\n          <div class="share-methods-header">\n            <h4><i class="fas fa-share-alt"></i> Opciones de Compartir</h4>\n            <p>Elige cómo quieres invitar a nuevos miembros</p>\n          </div>\n          <div class="share-methods-grid">\n            <div class="share-method" onclick="advancedGroupsSystem.shareViaWhatsApp('${a}')">\n              <div class="share-method-icon">\n                <i class="fab fa-whatsapp"></i>\n              </div>\n              <h5>WhatsApp</h5>\n              <p>Comparte por chat o grupos</p>\n            </div>\n            <div class="share-method" onclick="advancedGroupsSystem.shareViaEmail('${a}')">\n              <div class="share-method-icon">\n                <i class="fas fa-envelope"></i>\n              </div>\n              <h5>Email</h5>\n              <p>Envía invitación formal</p>\n            </div>\n            <div class="share-method" onclick="advancedGroupsSystem.shareViaTelegram('${a}')">\n              <div class="share-method-icon">\n                <i class="fab fa-telegram-plane"></i>\n              </div>\n              <h5>Telegram</h5>\n              <p>Comparte en chats y canales</p>\n            </div>\n            <div class="share-method" onclick="advancedGroupsSystem.copyGroupLink('${a}')">\n              <div class="share-method-icon">\n                <i class="fas fa-link"></i>\n              </div>\n              <h5>Copiar Enlace</h5>\n              <p>Copia link directo al grupo</p>\n            </div>\n            <div class="share-method" onclick="advancedGroupsSystem.generateQRCode('${a}')">\n              <div class="share-method-icon">\n                <i class="fas fa-qrcode"></i>\n              </div>\n              <h5>Código QR</h5>\n              <p>Genera código para escanear</p>\n            </div>\n            <div class="share-method" onclick="advancedGroupsSystem.shareOnSocialMedia('${a}')">\n              <div class="share-method-icon">\n                <i class="fas fa-share-nodes"></i>\n              </div>\n              <h5>Redes Sociales</h5>\n              <p>Facebook, Twitter, Instagram</p>\n            </div>\n          </div>\n        </div>\n        \x3c!-- Share Statistics --\x3e\n        <div class="share-stats">\n          <h4><i class="fas fa-chart-line"></i> Actividad de Invitaciones</h4>\n          <div class="stats-grid">\n            <div class="stat-item">\n              <span class="stat-value">15</span>\n              <span class="stat-label">Invitaciones Enviadas</span>\n            </div>\n            <div class="stat-item">\n              <span class="stat-value">8</span>\n              <span class="stat-label">Miembros Unidos</span>\n            </div>\n            <div class="stat-item">\n              <span class="stat-value">53%</span>\n              <span class="stat-label">Tasa de Conversión</span>\n            </div>\n          </div>\n        </div>\n        \x3c!-- Quick Copy Section --\x3e\n        <div class="quick-copy-section">\n          <input type="text" class="quick-copy-input" value="https://latanda.online/grupos/${a}" readonly>\n          <button class="quick-copy-btn" onclick="advancedGroupsSystem.copyGroupLink('${a}')">\n            <i class="fas fa-copy"></i>\n            Copiar Enlace Rápido\n          </button>\n        </div>\n      </div>\n    `,!0).querySelector(".modal-actions").innerHTML=`\n      <button class="btn btn-primary" onclick="advancedGroupsSystem.copyGroupLink('${a}')">\n        <i class="fas fa-copy"></i> Copiar Enlace Rápido\n      </button>\n      <button class="btn btn-success" onclick="advancedGroupsSystem.shareViaWhatsApp('${a}')">\n        <i class="fab fa-whatsapp"></i> WhatsApp\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-times"></i> Cerrar\n      </button>\n    `)}shareViaWhatsApp(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n=`¡Únete al grupo "${e.name}"! 🚀\n\n💰 Contribución: L. ${e.contribution.toLocaleString()}\n👥 Miembros: ${e.members}/${e.maxMembers}\n🏆 Confianza: ${e.trustScore}%\n\n#LaTandaChain #AhorroColectivo`,t=`https://wa.me/?text=${encodeURIComponent(n)}`;window.open(t,"_blank"),this.showNotification("📱 Abriendo WhatsApp...","info")}shareViaEmail(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n=`Invitación al grupo: ${e.name}`,t=`Hola,\n\nTe invito a unirte a nuestro grupo de ahorro "${e.name}".\n\nDetalles:\n• Contribución: L. ${e.contribution.toLocaleString()}\n• Miembros actuales: ${e.members}/${e.maxMembers}\n• Puntaje de confianza: ${e.trustScore}%\n\n¡Ahorra de forma segura y organizada con La Tanda Chain!\n\nSaludos cordiales`,s=`mailto:?subject=${encodeURIComponent(n)}&body=${encodeURIComponent(t)}`;window.location.href=s,this.showNotification("📧 Abriendo cliente de email...","info")}shareViaTelegram(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n=`${window.location.origin}/groups-advanced-system.html?join=${a}`,t=`🏦 *${e.name}*\n\n${e.description}\n\n📊 *Detalles del grupo:*\n👥 Miembros: ${e.members}/${e.maxMembers}\n💰 Contribución: L. ${e.contribution.toLocaleString()}\n⭐ Confianza: ${e.trustScore}%\n\n¡Únete a nuestro grupo de ahorro!\n\n${n}`,s=`https://t.me/share/url?url=${encodeURIComponent(n)}&text=${encodeURIComponent(t)}`;window.open(s,"_blank"),this.showNotification("📱 Compartiendo en Telegram...","info")}shareOnSocialMedia(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n=this.createModal("social-media-share","🌐 Compartir en Redes Sociales",`\n      <div class="social-media-container">\n        <div class="social-platforms">\n          <div class="social-platform facebook" onclick="advancedGroupsSystem.shareOnFacebook('${a}')">\n            <div class="social-icon">\n              <i class="fab fa-facebook-f"></i>\n            </div>\n            <div class="social-info">\n              <h4>Facebook</h4>\n              <p>Comparte en tu timeline o grupos</p>\n            </div>\n            <div class="social-arrow">\n              <i class="fas fa-arrow-right"></i>\n            </div>\n          </div>\n          <div class="social-platform twitter" onclick="advancedGroupsSystem.shareOnTwitter('${a}')">\n            <div class="social-icon">\n              <i class="fab fa-twitter"></i>\n            </div>\n            <div class="social-info">\n              <h4>Twitter / X</h4>\n              <p>Publica un tweet sobre el grupo</p>\n            </div>\n            <div class="social-arrow">\n              <i class="fas fa-arrow-right"></i>\n            </div>\n          </div>\n          <div class="social-platform instagram" onclick="advancedGroupsSystem.shareOnInstagram('${a}')">\n            <div class="social-icon">\n              <i class="fab fa-instagram"></i>\n            </div>\n            <div class="social-info">\n              <h4>Instagram</h4>\n              <p>Comparte en stories o posts</p>\n            </div>\n            <div class="social-arrow">\n              <i class="fas fa-arrow-right"></i>\n            </div>\n          </div>\n          <div class="social-platform linkedin" onclick="advancedGroupsSystem.shareOnLinkedIn('${a}')">\n            <div class="social-icon">\n              <i class="fab fa-linkedin-in"></i>\n            </div>\n            <div class="social-info">\n              <h4>LinkedIn</h4>\n              <p>Comparte profesionalmente</p>\n            </div>\n            <div class="social-arrow">\n              <i class="fas fa-arrow-right"></i>\n            </div>\n          </div>\n          <div class="social-platform whatsapp" onclick="advancedGroupsSystem.shareViaWhatsApp('${a}')">\n            <div class="social-icon">\n              <i class="fab fa-whatsapp"></i>\n            </div>\n            <div class="social-info">\n              <h4>WhatsApp</h4>\n              <p>Comparte por chat individual o grupos</p>\n            </div>\n            <div class="social-arrow">\n              <i class="fas fa-arrow-right"></i>\n            </div>\n          </div>\n          <div class="social-platform copy-link" onclick="advancedGroupsSystem.copyGroupLink('${a}')">\n            <div class="social-icon">\n              <i class="fas fa-link"></i>\n            </div>\n            <div class="social-info">\n              <h4>Copiar Enlace</h4>\n              <p>Copia el enlace para compartir donde quieras</p>\n            </div>\n            <div class="social-arrow">\n              <i class="fas fa-arrow-right"></i>\n            </div>\n          </div>\n        </div>\n        <div class="social-preview">\n          <h4>📝 Vista Previa del Mensaje</h4>\n          <div class="preview-card">\n            <div class="preview-header">\n              <div class="preview-avatar">${e.avatar}</div>\n              <div class="preview-title">\n                <h5>${e.name}</h5>\n                <span>Grupo de Ahorro • La Tanda Chain</span>\n              </div>\n            </div>\n            <div class="preview-content">\n              <p>${e.description}</p>\n              <div class="preview-stats">\n                <span><i class="fas fa-users"></i> ${e.members}/${e.maxMembers} miembros</span>\n                <span><i class="fas fa-coins"></i> L. ${e.contribution.toLocaleString()}</span>\n                <span><i class="fas fa-star"></i> ${e.trustScore}% confianza</span>\n              </div>\n            </div>\n            <div class="preview-footer">\n              <button class="preview-btn">Únete al Grupo</button>\n            </div>\n          </div>\n        </div>\n      </div>\n    `,!0);n.style.maxWidth="800px",n.querySelector(".modal-actions").style.display="none"}shareOnFacebook(a){if(!this.groups.find(e=>e.id===a))return;const e=`${window.location.origin}/groups-advanced-system.html?join=${a}`,n=`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(e)}`;window.open(n,"_blank","width=600,height=400"),this.showNotification("📘 Compartiendo en Facebook...","info")}shareOnTwitter(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n=`${window.location.origin}/groups-advanced-system.html?join=${a}`,t=`🏦 Únete a "${e.name}" - Grupo de ahorro seguro\n\n💰 Contribución: L. ${e.contribution.toLocaleString()}\n👥 ${e.members}/${e.maxMembers} miembros\n⭐ ${e.trustScore}% confianza\n\n#LaTandaChain #AhorroSeguro #CooperativaDigital`,s=`https://twitter.com/intent/tweet?text=${encodeURIComponent(t)}&url=${encodeURIComponent(n)}`;window.open(s,"_blank","width=600,height=400"),this.showNotification("🐦 Compartiendo en Twitter...","info")}shareOnInstagram(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n=`${window.location.origin}/groups-advanced-system.html?join=${a}`,t=`🏦 ${e.name}\n\n${e.description}\n\n💰 Contribución: L. ${e.contribution.toLocaleString()}\n👥 Miembros: ${e.members}/${e.maxMembers}\n⭐ Confianza: ${e.trustScore}%\n\nEnlace: ${n}\n\n#LaTandaChain #AhorroSeguro #CooperativaDigital`;navigator.clipboard.writeText(t).then(()=>{this.showNotification("📋 Texto copiado. Abriendo Instagram...","info"),window.open("https://www.instagram.com/","_blank")}).catch(()=>{this.showNotification("📱 Abre Instagram y comparte manualmente","info")})}shareOnLinkedIn(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n=`${window.location.origin}/groups-advanced-system.html?join=${a}`,t=`Únete al grupo de ahorro: ${e.name}`,s=`${e.description}\n\nContribución: L. ${e.contribution.toLocaleString()} | Miembros: ${e.members}/${e.maxMembers} | Confianza: ${e.trustScore}%`,i=`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(n)}&title=${encodeURIComponent(t)}&summary=${encodeURIComponent(s)}`;window.open(i,"_blank","width=600,height=400"),this.showNotification("💼 Compartiendo en LinkedIn...","info")}copyGroupLink(a){const e=`https://latanda.hn/group/${a}`;if(navigator.clipboard)navigator.clipboard.writeText(e).then(()=>{this.showNotification("🔗 Enlace copiado al portapapeles","success")});else{const a=document.createElement("textarea");a.value=e,document.body.appendChild(a),a.focus(),a.select();try{document.execCommand("copy"),this.showNotification("🔗 Enlace copiado al portapapeles","success")}catch(a){this.showNotification("❌ No se pudo copiar el enlace","error")}document.body.removeChild(a)}}generateQRCode(a){const e=this.groups.find(e=>e.id===a);if(!e)return void this.showNotification("error","Grupo no encontrado");const n=`${window.location.origin}/groups-advanced-system.html?join=${a}`,t=this.createModal("qr-code-generator","📱 Código QR del Grupo",`\n      <div class="qr-code-container">\n        <div class="qr-group-info">\n          <div class="qr-group-header">\n            <div class="qr-group-avatar">${e.avatar}</div>\n            <div class="qr-group-details">\n              <h3>${e.name}</h3>\n              <p>${e.description}</p>\n              <div class="qr-group-stats">\n                <span><i class="fas fa-users"></i> ${e.members}/${e.maxMembers} miembros</span>\n                <span><i class="fas fa-coins"></i> L. ${e.contribution.toLocaleString()}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class="qr-code-section">\n          <div class="qr-code-display" id="qrCodeDisplay">\n            ${this.generateQRCodeSVG(n)}\n          </div>\n          <div class="qr-code-info">\n            <p><i class="fas fa-info-circle"></i> Escanea este código para unirte al grupo</p>\n            <div class="qr-url">\n              <input type="text" value="${n}" id="qrGroupUrl" readonly>\n              <button class="btn btn-sm btn-outline" onclick="advancedGroupsSystem.copyQRUrl('${a}')">\n                <i class="fas fa-copy"></i>\n              </button>\n            </div>\n          </div>\n        </div>\n        <div class="qr-actions">\n          <button class="btn btn-secondary" onclick="advancedGroupsSystem.downloadQRCode('${a}')">\n            <i class="fas fa-download"></i> Descargar PNG\n          </button>\n          <button class="btn btn-secondary" onclick="advancedGroupsSystem.printQRCode('${a}')">\n            <i class="fas fa-print"></i> Imprimir\n          </button>\n          <button class="btn btn-primary" onclick="advancedGroupsSystem.shareQRCode('${a}')">\n            <i class="fas fa-share"></i> Compartir QR\n          </button>\n        </div>\n      </div>\n    `,!0);t.style.maxWidth="500px",t.querySelector(".modal-actions").style.display="none"}generateQRCodeSVG(a){let e='<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">';e+='<rect width="200" height="200" fill="white"/>';for(let n=0;n<25;n++)for(let t=0;t<25;t++)(7*(a.length+25*n+t)+3*n+2*t)%3==0&&(e+=`<rect x="${8*t}" y="${8*n}" width="8" height="8" fill="black"/>`);return[{x:0,y:0},{x:144,y:0},{x:0,y:144}].forEach(a=>{e+=`<rect x="${a.x}" y="${a.y}" width="56" height="56" fill="black"/>`,e+=`<rect x="${a.x+8}" y="${a.y+8}" width="40" height="40" fill="white"/>`,e+=`<rect x="${a.x+16}" y="${a.y+16}" width="24" height="24" fill="black"/>`}),e+="</svg>",e}copyQRUrl(a){document.getElementById("qrGroupUrl").select(),document.execCommand("copy"),this.showNotification("success","🔗 Enlace copiado al portapapeles")}downloadQRCode(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n=document.getElementById("qrCodeDisplay");if(!n)return;const t=document.createElement("canvas"),s=t.getContext("2d");t.width=300,t.height=300,s.fillStyle="white",s.fillRect(0,0,t.width,t.height);const i=(new XMLSerializer).serializeToString(n.querySelector("svg")),o=new Image;o.onload=function(){s.drawImage(o,50,50,200,200);const a=document.createElement("a");a.download=`QR-${e.name.replace(/\s+/g,"-")}.png`,a.href=t.toDataURL(),a.click()},o.src="data:image/svg+xml;base64,"+btoa(i),this.showNotification("success","📱 Código QR descargado")}printQRCode(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n=document.getElementById("qrCodeDisplay");if(!n)return;const t=window.open("","_blank");t.document.write(`\n      <!DOCTYPE html>\n      <html>\n      <head>\n        <title>Código QR - ${e.name}</title>\n        <style>\n          body {\n            font-family: Arial, sans-serif;\n            text-align: center;\n            padding: 20px;\n            background: white;\n          }\n          .qr-print {\n            margin: 20px auto;\n            max-width: 400px;\n          }\n          .group-info {\n            margin-bottom: 20px;\n            padding: 20px;\n            border: 2px solid #00FFFF;\n            border-radius: 10px;\n          }\n          .qr-code {\n            margin: 20px 0;\n          }\n          @media print {\n            body { margin: 0; }\n          }\n        </style>\n      </head>\n      <body>\n        <div class="qr-print">\n          <div class="group-info">\n            <h1>${e.name}</h1>\n            <p>${e.description}</p>\n            <p><strong>Miembros:</strong> ${e.members}/${e.maxMembers}</p>\n            <p><strong>Contribución:</strong> L. ${e.contribution.toLocaleString()}</p>\n          </div>\n          <div class="qr-code">\n            ${n.innerHTML}\n          </div>\n          <p><strong>Escanea el código QR para unirte al grupo</strong></p>\n        </div>\n      </body>\n      </html>\n    `),t.document.close(),t.focus(),t.print(),this.showNotification("success","🖨️ Preparando impresión del código QR")}shareQRCode(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n=`${window.location.origin}/groups-advanced-system.html?join=${a}`;navigator.share?navigator.share({title:`Únete al grupo: ${e.name}`,text:`${e.description}\nMiembros: ${e.members}/${e.maxMembers}\nContribución: L. ${e.contribution.toLocaleString()}`,url:n}).then(()=>{this.showNotification("success","✅ Código QR compartido")}).catch(()=>{this.fallbackShareQR(a)}):this.fallbackShareQR(a)}fallbackShareQR(a){this.closeModal(),setTimeout(()=>this.shareGroup(a),300)}exportGroupData(a){this.groups.find(e=>e.id===a)&&(this.createModal("export-data","📊 Exportar Datos",'\n      <div class="export-data-container">\n        <div class="export-options">\n          <h6>Selecciona qué datos exportar:</h6>\n          <div class="export-checkboxes">\n            <label class="checkbox-option">\n              <input type="checkbox" id="export-basic" checked>\n              <span class="checkbox-custom"></span>\n              <span>Información básica del grupo</span>\n            </label>\n            <label class="checkbox-option">\n              <input type="checkbox" id="export-members" checked>\n              <span class="checkbox-custom"></span>\n              <span>Lista de miembros</span>\n            </label>\n            <label class="checkbox-option">\n              <input type="checkbox" id="export-finances" checked>\n              <span class="checkbox-custom"></span>\n              <span>Datos financieros</span>\n            </label>\n            <label class="checkbox-option">\n              <input type="checkbox" id="export-transactions">\n              <span class="checkbox-custom"></span>\n              <span>Historial de transacciones</span>\n            </label>\n            <label class="checkbox-option">\n              <input type="checkbox" id="export-activity">\n              <span class="checkbox-custom"></span>\n              <span>Registro de actividad</span>\n            </label>\n          </div>\n        </div>\n        <div class="export-format">\n          <h6>Formato de exportación:</h6>\n          <div class="format-options">\n            <label class="radio-option">\n              <input type="radio" name="export-format" value="json" checked>\n              <span class="radio-custom"></span>\n              <span>JSON (para desarrolladores)</span>\n            </label>\n            <label class="radio-option">\n              <input type="radio" name="export-format" value="csv">\n              <span class="radio-custom"></span>\n              <span>CSV (para Excel)</span>\n            </label>\n            <label class="radio-option">\n              <input type="radio" name="export-format" value="txt">\n              <span class="radio-custom"></span>\n              <span>TXT (texto plano)</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    ').querySelector(".modal-actions").innerHTML=`\n      <button class="btn btn-success" onclick="advancedGroupsSystem.confirmExportData('${a}')">\n        <i class="fas fa-download"></i> Exportar\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        Cancelar\n      </button>\n    `)}confirmExportData(a){const e=this.groups.find(e=>e.id===a);if(!e)return;const n=document.getElementById("export-basic")?.checked,t=document.getElementById("export-members")?.checked,s=document.getElementById("export-finances")?.checked,i=document.getElementById("export-transactions")?.checked,o=document.getElementById("export-activity")?.checked,r=document.querySelector('input[name="export-format"]:checked')?.value||"json",c={exportInfo:{groupId:e.id,exportDate:(new Date).toISOString(),exportedBy:"Usuario Actual",format:r}};let l,d,p;switch(n&&(c.basicInfo={name:e.name,description:e.description,type:e.type,location:e.location,created:e.created,status:e.status}),t&&(c.members={count:e.members,maxMembers:e.maxMembers,list:["Ana García","Carlos López","María Rodriguez","Juan Pérez"].slice(0,e.members)}),s&&(c.finances={contribution:e.contribution,totalSavings:e.totalSavings,performance:e.performance,trustScore:e.trustScore}),i&&(c.transactions=[{date:"2025-01-08",member:"Carlos López",amount:1500,type:"payment"},{date:"2025-01-07",member:"María Rodriguez",amount:1500,type:"payment"}]),o&&(c.activity=[{date:"2025-01-08",type:"payment",description:"Pago recibido"},{date:"2025-01-07",type:"member",description:"Nuevo miembro"}]),r){case"json":l=JSON.stringify(c,null,2),d=`${e.name}-datos.json`,p="application/json";break;case"csv":l=this.convertToCSV(c),d=`${e.name}-datos.csv`,p="text/csv";break;case"txt":l=this.convertToText(c),d=`${e.name}-datos.txt`,p="text/plain"}const u=new Blob([l],{type:p}),m=URL.createObjectURL(u),v=document.createElement("a");v.href=m,v.download=d,document.body.appendChild(v),v.click(),document.body.removeChild(v),URL.revokeObjectURL(m),this.showNotification("📊 Datos exportados exitosamente","success"),this.closeModal()}convertToCSV(a){let e="Campo,Valor\n";return function a(n,t=""){for(const[s,i]of Object.entries(n))"object"!=typeof i||Array.isArray(i)?Array.isArray(i)?e+=`${t}${s},${i.join(";")}\n`:e+=`${t}${s},${i}\n`:a(i,t+s+".")}(a),e}convertToText(a){let e="EXPORTACIÓN DE DATOS DEL GRUPO\n";function n(a,t,s=""){e+=`${s}${t}:\n`;for(const[t,i]of Object.entries(a))"object"!=typeof i||Array.isArray(i)?Array.isArray(i)?e+=`${s} ${t}: ${i.join(", ")}\n`:e+=`${s} ${t}: ${i}\n`:n(i,t,s+" ");e+="\n"}e+="================================\n",e+=`Fecha de exportación: ${(new Date).toLocaleString("es-HN")}\n\n`;for(const[e,t]of Object.entries(a))"object"==typeof t&&n(t,e.toUpperCase());return e}calculateTandasStats(a){const e=a.filter(a=>"active"===a.status),n=a.filter(a=>"completed"===a.status),t=a.filter(a=>"upcoming"===a.status),s=a.reduce((a,e)=>a+(e.totalAmount||0),0),i=e.reduce((a,e)=>a+(e.paymentsPending||0),0);return{total:a.length,active:e.length,completed:n.length,upcoming:t.length,totalAmount:s,pendingPayments:i}}renderGroupFilter(a){const e=this.groups.find(e=>e.id===a);return e?`\n      <div class="group-filter-header">\n        <div class="breadcrumb">\n          <a href="#" onclick="advancedGroupsSystem.switchTab('groups')" class="breadcrumb-item">\n            <i class="fas fa-users"></i> Mis Grupos\n          </a>\n          <i class="fas fa-chevron-right breadcrumb-separator"></i>\n          <span class="breadcrumb-item current">\n            ${e.avatar} ${e.name}\n          </span>\n          <i class="fas fa-chevron-right breadcrumb-separator"></i>\n          <span class="breadcrumb-item current">Tandas</span>\n        </div>\n        <div class="filter-actions">\n          <button class="btn btn-secondary btn-sm" onclick="advancedGroupsSystem.loadTandasContent()">\n            <i class="fas fa-times"></i> Quitar Filtro\n          </button>\n        </div>\n      </div>\n    `:""}renderAllTandasHeader(){return'\n      <div class="tandas-header">\n        <div class="header-content">\n          <h3><i class="fas fa-sync-alt"></i> Gestión de Tandas</h3>\n          <p class="header-subtitle">Administra tus tandas activas y ciclos de pago</p>\n        </div>\n      </div>\n    '}renderTandasStats(a){return`\n      <div class="tandas-stats-overview">\n        <div class="stat-card">\n          <div class="stat-icon active">\n            <i class="fas fa-sync-alt"></i>\n          </div>\n          <div class="stat-info">\n            <div class="stat-value">${a.active}</div>\n            <div class="stat-label">Tandas Activas</div>\n          </div>\n        </div>\n        <div class="stat-card">\n          <div class="stat-icon completed">\n            <i class="fas fa-check-circle"></i>\n          </div>\n          <div class="stat-info">\n            <div class="stat-value">${a.completed}</div>\n            <div class="stat-label">Completadas</div>\n          </div>\n        </div>\n        <div class="stat-card">\n          <div class="stat-icon pending">\n            <i class="fas fa-exclamation-triangle"></i>\n          </div>\n          <div class="stat-info">\n            <div class="stat-value">${a.pendingPayments}</div>\n            <div class="stat-label">Pagos Pendientes</div>\n          </div>\n        </div>\n        <div class="stat-card">\n          <div class="stat-icon total">\n            <i class="fas fa-coins"></i>\n          </div>\n          <div class="stat-info">\n            <div class="stat-value">L. ${a.totalAmount.toLocaleString()}</div>\n            <div class="stat-label">Valor Total</div>\n          </div>\n        </div>\n      </div>\n    `}renderTandasFilters(){return`\n      <div class="tandas-filters">\n        <div class="filter-group">\n          <label class="filter-label">Estado:</label>\n          <div class="filter-buttons">\n            <button class="filter-btn active" data-filter="all" onclick="advancedGroupsSystem.filterTandasByStatus('all')">\n              Todas\n            </button>\n            <button class="filter-btn" data-filter="active" onclick="advancedGroupsSystem.filterTandasByStatus('active')">\n              Activas\n            </button>\n            <button class="filter-btn" data-filter="pending-payments" onclick="advancedGroupsSystem.filterTandasByStatus('pending-payments')">\n              Con Pagos Pendientes\n            </button>\n            <button class="filter-btn" data-filter="completed" onclick="advancedGroupsSystem.filterTandasByStatus('completed')">\n              Completadas\n            </button>\n          </div>\n        </div>\n        <div class="filter-group">\n          <label class="filter-label">Grupo:</label>\n          <select class="form-select" id="group-filter" onchange="advancedGroupsSystem.filterTandasByGroup(this.value)">\n            <option value="">Todos los grupos</option>\n            ${this.groups.map(a=>`\n              <option value="${a.id}">${a.avatar} ${a.name}</option>\n            `).join("")}\n          </select>\n        </div>\n      </div>\n    `}renderTandaCard(a){const e=a.status,n=a.progress||0,t=this.getTandaUrgencyClass(a),s=this.getTandaPrimaryAction(a),i=this.getTandaStatusIcon(a.status),o=this.calculateDaysToNext(a);return`\n      <div class="tanda-card-v2 ${e} ${t}" data-tanda-id="${a.id}">\n        \x3c!-- Status Indicator --\x3e\n        <div class="tanda-status-indicator ${e}">\n          <i class="fas fa-${i}"></i>\n        </div>\n        \x3c!-- Main Content --\x3e\n        <div class="tanda-main-content">\n          \x3c!-- Header Compact --\x3e\n          <div class="tanda-compact-header">\n            <div class="tanda-identity">\n              <span class="group-avatar-lg">${a.groupAvatar}</span>\n              <div class="tanda-title-group">\n                <h5 class="tanda-title">${a.name}</h5>\n                <span class="group-subtitle">${a.groupName}</span>\n              </div>\n            </div>\n            <div class="tanda-amount-display">\n              <div class="amount-primary">L. ${a.roundAmount.toLocaleString()}</div>\n              <div class="amount-subtitle">por ronda</div>\n            </div>\n          </div>\n          \x3c!-- Progress Section Enhanced --\x3e\n          <div class="tanda-progress-enhanced">\n            <div class="progress-header">\n              <div class="progress-status">\n                ${this.renderProgressStatus(a)}\n              </div>\n              <div class="progress-metrics">\n                <span class="progress-rounds">${a.currentRound}/${a.totalRounds}</span>\n                <span class="progress-percentage">${n}%</span>\n              </div>\n            </div>\n            <div class="progress-bar-enhanced">\n              <div class="progress-track">\n                ${this.renderProgressSteps(a)}\n              </div>\n              <div class="progress-fill-animated" style="width: ${n}%"></div>\n            </div>\n          </div>\n          \x3c!-- Critical Info Bar --\x3e\n          <div class="tanda-critical-info">\n            ${this.renderCriticalInfo(a,o)}\n          </div>\n          \x3c!-- Expandable Details --\x3e\n          <div class="tanda-expandable-details" data-expanded="false">\n            <div class="details-trigger" onclick="advancedGroupsSystem.toggleTandaDetails('${a.id}')">\n              <span>Ver más detalles</span>\n              <i class="fas fa-chevron-down"></i>\n            </div>\n            <div class="details-content">\n              ${this.renderExpandedDetails(a)}\n            </div>\n          </div>\n        </div>\n        \x3c!-- Actions Redesigned --\x3e\n        <div class="tanda-actions-v2">\n          \x3c!-- Primary Action --\x3e\n          <button class="btn-primary-action ${s.class}"\n              onclick="${s.onclick}"\n              ${s.disabled?"disabled":""}>\n            <i class="fas fa-${s.icon}"></i>\n            <span>${s.label}</span>\n          </button>\n          \x3c!-- Secondary Actions --\x3e\n          <div class="secondary-actions">\n            <button class="btn-icon" onclick="advancedGroupsSystem.viewTandaDetails('${a.id}')"\n                title="Ver detalles completos">\n              <i class="fas fa-eye"></i>\n            </button>\n            <div class="dropdown-enhanced">\n              <button class="btn-icon dropdown-trigger"\n                onclick="advancedGroupsSystem.toggleTandaActionsMenu('${a.id}')">\n                <i class="fas fa-ellipsis-v"></i>\n              </button>\n              <div class="dropdown-menu-enhanced" data-tanda="${a.id}">\n                ${this.renderTandaActionMenu(a)}\n              </div>\n            </div>\n          </div>\n        </div>\n        \x3c!-- Hover Effects Layer --\x3e\n        <div class="tanda-hover-effects"></div>\n      </div>\n    `}renderEmptyTandasState(a){const e=a?this.groups.find(e=>e.id===a):null;return`\n      <div class="empty-state-tandas">\n        <div class="empty-icon">🔄</div>\n        <h3>${e?`No hay tandas en ${e.name}`:"No tienes tandas activas"}</h3>\n        <p>${e?"Este grupo aún no tiene tandas creadas":"Crea tu primera tanda o únete a una existente para comenzar a ahorrar"}</p>\n        <div class="empty-actions">\n          <button class="btn btn-primary" onclick="advancedGroupsSystem.showCreateTandaModal(${a?`'${a}'`:"null"})">\n            <i class="fas fa-plus"></i> ${e?"Crear Tanda en este Grupo":"Crear Mi Primera Tanda"}\n          </button>\n          ${e?"":'\n          <button class="btn btn-secondary" onclick="advancedGroupsSystem.switchTab(\'matching\')">\n            <i class="fas fa-search"></i> Buscar Tandas para Unirse\n          </button>\n          '}\n        </div>\n      </div>\n    `}getTandaUrgencyClass(a){if("active"!==a.status)return"";if(a.paymentsPending>0){const e=new Date(a.nextPaymentDate),n=new Date,t=Math.ceil((e-n)/864e5);if(t<=3)return"urgent";if(t<=7)return"warning"}return""}getTandaStatusLabel(a){return{active:"Activa",completed:"Completada",upcoming:"Próxima",paused:"Pausada"}[a]||a}filterTandasByStatus(a){document.querySelectorAll(".filter-btn").forEach(a=>a.classList.remove("active"));const e=document.querySelector(`[data-filter="${a}"]`);e&&e.classList.add("active"),this.currentStatusFilter=a,this.applyTandasFilters(),this.showNotification(`🔍 Filtro aplicado: ${this.getStatusFilterLabel(a)}`,"info")}sortTandasBy(a){this.currentSortCriteria=a,this.applyTandasFilters(),this.showNotification(`📊 Tandas ordenadas por ${this.getSortCriteriaLabel(a)}`,"info")}applyTandasFilters(){this.loadTandasContent()}getStatusFilterLabel(a){return{all:"Todas las tandas",active:"Tandas activas","pending-payments":"Con pagos pendientes",completed:"Tandas completadas",paused:"Tandas pausadas"}[a]||a}getSortCriteriaLabel(a){return{date:"fecha de creación",progress:"progreso",amount:"monto",members:"número de miembros",name:"nombre alfabético"}[a]||a}editTanda(a){this.showNotification("✏️ Abriendo editor de tanda...","info"),this.createModal("edit-tanda","✏️ Editar Tanda",`\n      <div class="edit-tanda-container">\n        <p><i class="fas fa-wrench"></i> Función de edición en desarrollo</p>\n        <p>Tanda ID: ${a}</p>\n      </div>\n    `)}shareTanda(a){const e="¡Únete a esta tanda! Ahorra de manera segura y organizada. #LaTandaChain";navigator.share?navigator.share({title:"Invitación a Tanda",text:e,url:window.location.href}):navigator.clipboard.writeText(e).then(()=>{this.showNotification("📋 Información de tanda copiada al portapapeles","success")})}duplicateTanda(a){this.showNotification("🔄 Creando copia de la tanda...","info")}setTandaReminder(a){this.showNotification("⏰ Recordatorio configurado","success")}sendPaymentReminders(a){this.showNotification("📢 Recordatorios enviados a participantes","success")}pauseTanda(a){this.showNotification("⏸️ Tanda pausada temporalmente","warning")}archiveTanda(a){this.showNotification("📦 Tanda archivada","info")}cancelTanda(a){this.createModal("confirm-cancel","⚠️ Cancelar Tanda",'\n      <div class="confirm-container">\n        <p>¿Estás seguro de que quieres cancelar esta tanda?</p>\n        <div class="warning-message">\n          <i class="fas fa-exclamation-triangle"></i>\n          <span>Esta acción no se puede deshacer.</span>\n        </div>\n      </div>\n    ',!0).querySelector(".modal-actions").innerHTML=`\n      <button class="btn btn-danger" onclick="advancedGroupsSystem.confirmCancelTanda('${a}')">\n        <i class="fas fa-times"></i> Sí, Cancelar\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        <i class="fas fa-arrow-left"></i> No, Mantener\n      </button>\n    `}confirmCancelTanda(a){this.closeModal(),this.showNotification("❌ Tanda cancelada","error")}filterTandasByStatusOld(a){document.querySelectorAll(".filter-btn").forEach(a=>a.classList.remove("active")),document.querySelector(`[data-filter="${a}"]`).classList.add("active"),document.querySelectorAll(".tanda-card").forEach(e=>{if("all"===a)e.style.display="block";else if("pending-payments"===a){const a=e.querySelector(".detail-item.urgent");e.style.display=a?"block":"none"}else e.style.display=e.classList.contains(a)?"block":"none"}),this.showNotification(`📊 Mostrando tandas: ${"all"===a?"todas":this.getTandaStatusLabel(a)}`,"info",2e3)}filterTandasByGroup(a){a?this.loadTandasContent(a):this.loadTandasContent()}showCreateTandaModal(a=null){const e=a?this.groups.find(e=>e.id===a):null;this.createModal("create-tanda-advanced","🔄 Nueva Tanda",`\n      <div class="create-tanda-form">\n        <div class="form-group">\n          <label>Nombre de la Tanda <span class="required">*</span></label>\n          <input type="text" class="form-control" id="new-tanda-name" placeholder="Ej: Tanda Marzo 2025">\n        </div>\n        <div class="form-group">\n          <label>Grupo <span class="required">*</span></label>\n          <select class="form-control" id="new-tanda-group">\n            ${e?`\n            <option value="${e.id}" selected>${e.avatar} ${e.name}</option>\n            `:`\n            <option value="">Seleccionar grupo...</option>\n            ${this.groups.map(a=>`\n              <option value="${a.id}">${a.avatar} ${a.name}</option>\n            `).join("")}\n            `}\n          </select>\n        </div>\n        <div class="form-row">\n          <div class="form-group">\n            <label>Fecha de Inicio</label>\n            <input type="date" class="form-control" id="new-tanda-start" value="${(new Date).toISOString().split("T")[0]}">\n          </div>\n          <div class="form-group">\n            <label>Número de Rondas <span class="required">*</span></label>\n            <input type="number" class="form-control" id="new-tanda-rounds" value="4" min="2" max="12">\n          </div>\n        </div>\n        <div class="form-group">\n          <label>Monto por Ronda (L.) <span class="required">*</span></label>\n          <input type="number" class="form-control" id="new-tanda-amount" placeholder="6000" min="100">\n          <div class="help-text">Este será el monto que cada participante recibirá en su turno</div>\n        </div>\n        <div class="form-group">\n          <label>Frecuencia de Pago</label>\n          <select class="form-control" id="new-tanda-frequency">\n            <option value="weekly">Semanal</option>\n            <option value="biweekly">Quincenal</option>\n            <option value="monthly" selected>Mensual</option>\n          </select>\n        </div>\n        <div class="form-group">\n          <label>Descripción (opcional)</label>\n          <textarea class="form-control" id="new-tanda-description" rows="3" placeholder="Describe los objetivos de esta tanda..."></textarea>\n        </div>\n        <div class="form-group">\n          <div class="checkbox-group">\n            <label class="checkbox-option">\n              <input type="checkbox" id="tanda-auto-assign" checked>\n              <span class="checkbox-custom"></span>\n              <span>Asignación automática de turnos</span>\n            </label>\n            <label class="checkbox-option">\n              <input type="checkbox" id="tanda-notifications" checked>\n              <span class="checkbox-custom"></span>\n              <span>Enviar recordatorios automáticos</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    `).querySelector(".modal-actions").innerHTML='\n      <button class="btn btn-success" onclick="advancedGroupsSystem.confirmCreateAdvancedTanda()">\n        <i class="fas fa-plus"></i> Crear Tanda\n      </button>\n      <button class="btn btn-secondary" onclick="advancedGroupsSystem.closeModal()">\n        Cancelar\n      </button>\n    '}confirmCreateAdvancedTanda(){const a=document.getElementById("new-tanda-name")?.value,e=document.getElementById("new-tanda-group")?.value,n=document.getElementById("new-tanda-rounds")?.value,t=document.getElementById("new-tanda-amount")?.value;if(!(a&&e&&n&&t))return void this.showNotification("⚠️ Por favor completa todos los campos obligatorios","warning");const s=this.groups.find(a=>a.id===e);s?(this.showNotification(`✅ Tanda "${a}" creada exitosamente en ${s.name}`,"success"),this.closeModal(),setTimeout(()=>{this.loadTandasContent()},500)):this.showNotification("❌ Grupo no válido","error")}startTanda(a){this.showNotification("🚀 Tanda iniciada exitosamente","success"),setTimeout(()=>{this.loadTandasContent()},1e3)}toggleTandaActions(a){const e=document.getElementById(`tanda-actions-${a}`);e&&(e.classList.toggle("show"),document.querySelectorAll(".dropdown-menu.show").forEach(a=>{a!==e&&a.classList.remove("show")}))}generateTandaReport(a){this.showNotification("📊 Generando reporte de tanda...","info"),setTimeout(()=>{this.showNotification("✅ Reporte de tanda descargado","success")},2e3)}exportTandaData(a){this.showNotification("📤 Exportando datos de tanda...","info"),setTimeout(()=>{this.showNotification("✅ Datos de tanda exportados","success")},1500)}editTandaSettings(a){this.showNotification("⚙️ Editor de configuración de tanda disponible próximamente","info")}getLoadingHTML(a="Cargando..."){return`\n      <div class="loading-state">\n        <div class="loading-spinner">\n          <div class="spinner-ring"></div>\n        </div>\n        <div class="loading-message">\n          <h3><i class="fas fa-spinner fa-spin"></i> ${a}</h3>\n          <p>Por favor espera un momento...</p>\n        </div>\n      </div>\n    `}getErrorHTML(a="Ha ocurrido un error"){return`\n      <div class="error-state">\n        <div class="error-icon">\n          <i class="fas fa-exclamation-triangle"></i>\n        </div>\n        <div class="error-message">\n          <h3>❌ ${a}</h3>\n          <p>Intenta recargar la página o contacta al soporte si el problema persiste.</p>\n        </div>\n        <div class="error-actions">\n          <button class="btn btn-primary" onclick="window.location.reload()">\n            <i class="fas fa-refresh"></i> Recargar Página\n          </button>\n        </div>\n      </div>\n    `}renderMatchingInterface(){const a=this.getMatchingSuggestions(),e=this.getUserMatchingPreferences();return`\n      <div class="matching-interface">\n        \x3c!-- Matching Header --\x3e\n        <div class="matching-header">\n          <div class="compatibility-score">\n            <div class="score-circle">\n              <span class="score-number">${e.compatibilityScore}</span>\n            </div>\n            <div class="score-info">\n              <div class="score-label">Tu Score de Compatibilidad</div>\n              <div class="score-metrics">\n                <div class="metric">\n                <span class="metric-label">Experiencia</span>\n                <span class="metric-value">${e.experience}%</span>\n                </div>\n                <div class="metric">\n                <span class="metric-label">Confianza</span>\n                <span class="metric-value">${e.trustScore}%</span>\n                </div>\n                <div class="metric">\n                <span class="metric-label">Actividad</span>\n                <span class="metric-value">${e.activity}%</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class="matching-actions">\n            <button class="btn btn-primary" onclick="advancedGroupsSystem.refreshMatches()">\n              <i class="fas fa-sync-alt"></i>\n              <span>Actualizar Matches</span>\n            </button>\n            <button class="btn btn-secondary" onclick="advancedGroupsSystem.editMatchingPreferences()">\n              <i class="fas fa-cog"></i>\n              <span>Configurar</span>\n            </button>\n          </div>\n        </div>\n        \x3c!-- Matching Filters --\x3e\n        <div class="matching-filters">\n          <div class="filter-group">\n            <label>Tipo de Match</label>\n            <select class="form-select" id="matchType" onchange="advancedGroupsSystem.updateMatchingFilters()">\n              <option value="all">Todos los tipos</option>\n              <option value="groups">Grupos únicamente</option>\n              <option value="tandas">Tandas únicamente</option>\n              <option value="people">Personas únicamente</option>\n            </select>\n          </div>\n          <div class="filter-group">\n            <label>Ubicación</label>\n            <select class="form-select" id="locationFilter" onchange="advancedGroupsSystem.updateMatchingFilters()">\n              <option value="bay-islands" selected>Bay Islands</option>\n              <option value="all">Toda La Red</option>\n              <option value="tegucigalpa">Tegucigalpa</option>\n              <option value="sps">San Pedro Sula</option>\n              <option value="ceiba">La Ceiba</option>\n              <option value="choloma">Choloma</option>\n            </select>\n          </div>\n          <div class="filter-group">\n            <label>Rango de Contribución</label>\n            <select class="form-select" id="amountFilter" onchange="advancedGroupsSystem.updateMatchingFilters()">\n              <option value="all">Cualquier monto</option>\n              <option value="low">L. 500 - 2,000</option>\n              <option value="medium">L. 2,000 - 10,000</option>\n              <option value="high">L. 10,000+</option>\n            </select>\n          </div>\n          <div class="results-count">\n            <span class="count-number">${a.length}</span>\n            <span class="count-label">matches encontrados</span>\n          </div>\n        </div>\n        \x3c!-- Matching Results --\x3e\n        <div class="matching-results">\n          <div class="results-header">\n            <h3>Matches Recomendados</h3>\n            <p>Basados en tu perfil y preferencias</p>\n          </div>\n          <div class="matches-grid" id="matchesGrid">\n            ${a.map(a=>this.renderMatchCard(a)).join("")}\n          </div>\n        </div>\n      </div>\n    `}renderOptimizedMatchCard(a){const e=a.compatibility>=90?"#00ffff":a.compatibility>=75?"#7fff7f":a.compatibility>=60?"#ffff7f":"#ff7f7f";return`\n      <div class="match-card optimized" data-match-id="${a.id}" data-type="${a.type}">\n        <div class="match-card-header">\n          <div class="match-avatar-opt">\n            ${"group"===a.type?a.icon:"tanda"===a.type?"🔄":"👤"}\n          </div>\n          <div class="compatibility-badge-opt" style="background: linear-gradient(135deg, ${e}33, ${e}11); border: 1px solid ${e}66;">\n            <span class="compatibility-percent-opt">${a.compatibility}%</span>\n          </div>\n        </div>\n        <div class="match-content-opt">\n          <h4 class="match-title-opt">${a.name}</h4>\n          <p class="match-subtitle-opt">${a.subtitle}</p>\n          <div class="match-quick-stats">\n            <span class="quick-stat">📍 ${a.location}</span>\n            <span class="quick-stat">👥 ${a.members}</span>\n            <span class="quick-stat">⭐ ${a.rating}</span>\n            ${a.amount?`<span class="quick-stat">💰 L. ${a.amount.toLocaleString()}</span>`:""}\n          </div>\n          <div class="match-tags-opt">\n            ${a.tags.slice(0,2).map(a=>`<span class="match-tag-opt">${a}</span>`).join("")}\n            ${a.tags.length>2?`<span class="match-tag-opt more">+${a.tags.length-2}</span>`:""}\n          </div>\n          <div class="match-key-reason">\n            <i class="fas fa-lightbulb"></i>\n            <span>${a.reasons[0]}</span>\n          </div>\n        </div>\n        <div class="match-actions-opt">\n          <button class="btn btn-primary slim" onclick="advancedGroupsSystem.connectWithMatch('${a.id}', '${a.type}')">\n            <i class="fas fa-handshake"></i>\n            ${"group"===a.type?"Unirse":"tanda"===a.type?"Participar":"Conectar"}\n          </button>\n          <button class="btn btn-secondary slim" onclick="advancedGroupsSystem.viewMatchDetails('${a.id}', '${a.type}')">\n            <i class="fas fa-eye"></i>\n            Detalles\n          </button>\n          <button class="btn btn-icon slim" onclick="advancedGroupsSystem.saveMatch('${a.id}')" title="Guardar">\n            <i class="fas fa-bookmark"></i>\n          </button>\n        </div>\n      </div>\n    `}renderMatchCard(a){const e=a.compatibility>=90?"#00ffff":a.compatibility>=75?"#7fff7f":a.compatibility>=60?"#ffff7f":"#ff7f7f";return`\n      <div class="match-card" data-match-id="${a.id}" data-type="${a.type}">\n        <div class="match-header">\n          <div class="match-avatar">\n            ${"group"===a.type?a.icon:"tanda"===a.type?"🔄":"👤"}\n          </div>\n          <div class="match-info">\n            <h4 class="match-title">${a.name}</h4>\n            <p class="match-subtitle">${a.subtitle}</p>\n          </div>\n          <div class="match-compatibility">\n            <div class="compatibility-badge" style="background: linear-gradient(135deg, ${e}33, ${e}11); border: 1px solid ${e}66;">\n              <span class="compatibility-percent">${a.compatibility}%</span>\n              <span class="compatibility-label">Match</span>\n            </div>\n          </div>\n        </div>\n        <div class="match-details">\n          <div class="match-tags">\n            ${a.tags.map(a=>`<span class="match-tag">${a}</span>`).join("")}\n          </div>\n          <div class="match-stats">\n            <div class="stat">\n              <i class="fas fa-map-marker-alt"></i>\n              <span>${a.location}</span>\n            </div>\n            <div class="stat">\n              <i class="fas fa-users"></i>\n              <span>${a.members} miembros</span>\n            </div>\n            ${"tanda"===a.type?`\n            <div class="stat">\n              <i class="fas fa-dollar-sign"></i>\n              <span>L. ${a.amount?.toLocaleString()}</span>\n            </div>\n            `:""}\n            <div class="stat">\n              <i class="fas fa-star"></i>\n              <span>${a.rating}/5.0</span>\n            </div>\n          </div>\n          <div class="match-reasons">\n            <div class="reasons-header">\n              <i class="fas fa-lightbulb"></i>\n              <span>¿Por qué este match?</span>\n            </div>\n            <div class="reasons-list">\n              ${a.reasons.map(a=>`<div class="reason">${a}</div>`).join("")}\n            </div>\n          </div>\n        </div>\n        <div class="match-actions">\n          <button class="btn btn-primary" onclick="advancedGroupsSystem.connectWithMatch('${a.id}', '${a.type}')">\n            <i class="fas fa-handshake"></i>\n            ${"group"===a.type?"Solicitar Unirse":"tanda"===a.type?"Participar":"Conectar"}\n          </button>\n          <button class="btn btn-secondary" onclick="advancedGroupsSystem.viewMatchDetails('${a.id}', '${a.type}')">\n            <i class="fas fa-eye"></i>\n            Ver Detalles\n          </button>\n          <button class="btn btn-icon" onclick="advancedGroupsSystem.saveMatch('${a.id}')" title="Guardar para después">\n            <i class="fas fa-bookmark"></i>\n          </button>\n        </div>\n      </div>\n    `}getMatchingSuggestions(){return[{id:"group-001",type:"group",name:"Emprendedores Zona Norte",subtitle:"Grupo de empresarios y profesionales",icon:"💼",compatibility:94,location:"San Pedro Sula",members:12,rating:4.8,tags:["Profesional","Emprendimiento","Zona Norte"],reasons:["✨ Perfil profesional similar al tuyo","📍 Ubicación cercana (15 km)","💰 Rango de ahorro compatible"]},{id:"tanda-001",type:"tanda",name:"Tanda Vacacional 2025",subtitle:"Para vacaciones familiares",compatibility:89,location:"Tegucigalpa",members:8,amount:5e3,rating:4.9,tags:["Familiar","Vacaciones","Corto Plazo"],reasons:["🎯 Objetivo similar: Ahorro para viajes","⏰ Duración de 6 meses (ideal para ti)","👥 Grupo pequeño y confiable"]},{id:"group-002",type:"group",name:"Mamás Emprendedoras TGU",subtitle:"Red de apoyo para madres trabajadoras",icon:"👩‍💼",compatibility:87,location:"Tegucigalpa",members:15,rating:4.7,tags:["Mujeres","Emprendimiento","Familia"],reasons:["👩‍👧‍👦 Perfil familiar compatible","💪 Enfoque en empoderamiento femenino","🤝 Red de apoyo mutuo"]},{id:"person-001",type:"person",name:"María Elena Rodríguez",subtitle:"Contadora, experiencia en tandas",compatibility:92,location:"Tegucigalpa",members:1,rating:5,tags:["Experta","Confiable","Local"],reasons:["🎓 Experiencia profesional en finanzas","⭐ Historial perfecto en tandas anteriores","📍 Vive en tu misma zona"]},{id:"tanda-002",type:"tanda",name:"Tanda Casa Propia 2025",subtitle:"Ahorro para enganche de vivienda",compatibility:91,location:"Tegucigalpa",members:6,amount:15e3,rating:4.8,tags:["Vivienda","Largo Plazo","Alto Monto"],reasons:["🏠 Meta de vivienda propia compatible","💎 Monto alto para objetivos serios","📈 Plan de 2 años bien estructurado"]},{id:"group-003",type:"group",name:"Jóvenes Profesionales",subtitle:"Recién graduados y profesionales jóvenes",icon:"🎓",compatibility:83,location:"San Pedro Sula",members:20,rating:4.6,tags:["Jóvenes","Profesionales","Networking"],reasons:["👨‍🎓 Rango de edad similar (25-35 años)","🚀 Enfoque en crecimiento profesional","💼 Oportunidades de networking"]},{id:"tanda-003",type:"tanda",name:"Tanda Emergencia",subtitle:"Fondo de contingencia familiar",compatibility:78,location:"La Ceiba",members:10,amount:2500,rating:4.5,tags:["Emergencia","Corto Plazo","Seguridad"],reasons:["🛡️ Seguridad financiera familiar","⚡ Acceso rápido a fondos de emergencia","👥 Grupo de apoyo mutuo"]},{id:"group-004",type:"group",name:"Bay Islands Tourism Network",subtitle:"Red de turismo y hospitalidad",icon:"🏝️",compatibility:89,location:"Bay Islands",members:14,rating:4.8,tags:["Turismo","Hospitalidad","Islas"],reasons:["🏝️ Enfoque en industria turística local","🌊 Oportunidades en sector marítimo","🤝 Conexión con comunidad isleña"]},{id:"tanda-004",type:"tanda",name:"Tanda Boat Fund Roatán",subtitle:"Para equipos de pesca y turismo",compatibility:87,location:"Bay Islands",members:8,amount:12e3,rating:4.9,tags:["Marítimo","Equipos","Turismo"],reasons:["⛵ Enfoque en actividades marítimas","🎣 Inversión en equipos de trabajo","🏝️ Comunidad de Bay Islands"]}]}getUserMatchingPreferences(){return{compatibilityScore:94,experience:85,trustScore:96,activity:78,preferredAmount:"medium",preferredDuration:"short",location:"tegucigalpa",interests:["familia","profesional","vivienda"]}}initializeMatchingFeatures(){this.addMatchCardEffects(),this.setupMatchingFilters(),this.setupMatchingKeyboardShortcuts(),this.setupMatchingGuidance(),this.setupMatchingUpdates()}addMatchCardEffects(){document.querySelectorAll(".match-card").forEach(a=>{a.addEventListener("mouseenter",()=>{a.style.transform="translateY(-5px)",a.style.boxShadow="0 10px 30px rgba(0, 255, 255, 0.2)"}),a.addEventListener("mouseleave",()=>{a.style.transform="translateY(0)",a.style.boxShadow="0 4px 15px rgba(0, 0, 0, 0.1)"})})}setupMatchingFilters(){["matchType","locationFilter","amountFilter"].forEach(a=>{const e=document.getElementById(a);e&&e.addEventListener("change",()=>{this.updateMatchingFilters()})})}setupMatchingKeyboardShortcuts(){document.addEventListener("keydown",a=>{if("matching"===this.currentTab)switch(a.key){case"r":(a.ctrlKey||a.metaKey)&&(a.preventDefault(),this.refreshMatches());break;case"f":(a.ctrlKey||a.metaKey)&&(a.preventDefault(),document.getElementById("matchType")?.focus())}})}updateMatchingFilters(){const a=document.getElementById("matchType")?.value,e=document.getElementById("locationFilter")?.value,n=document.getElementById("amountFilter")?.value,t=this.applyMatchingFilters(a,e,n);this.updateMatchesGrid(t),this.showNotification(`🔍 Filtros aplicados: ${t.length} matches encontrados`,"info")}applyMatchingFilters(a,e,n){let t=this.getMatchingSuggestions();if(a&&"all"!==a&&(t=t.filter(e=>"groups"===a?"group"===e.type:"tandas"===a?"tanda"===e.type:"people"!==a||"person"===e.type)),e&&"all"!==e){const a={tegucigalpa:"Tegucigalpa",sps:"San Pedro Sula",ceiba:"La Ceiba",choloma:"Choloma"};t=t.filter(n=>n.location===a[e])}return n&&"all"!==n&&(t=t.filter(a=>{if("tanda"!==a.type)return!0;const e=a.amount||0;switch(n){case"low":return e<=2e3;case"medium":return e>2e3&&e<=1e4;case"high":return e>1e4;default:return!0}})),t}updateMatchesGrid(a){const e=document.getElementById("matchesGrid");e&&(e.innerHTML=a.map(a=>this.renderMatchCard(a)).join(""),this.addMatchCardEffects())}refreshMatches(){this.showNotification("🔄 Buscando nuevos matches compatibles...","info",3e3);const a=document.querySelector('[onclick="advancedGroupsSystem.refreshMatches()"]');if(a){const e=a.innerHTML;a.innerHTML='<i class="fas fa-spinner fa-spin"></i> <span>Actualizando...</span>',a.disabled=!0,setTimeout(()=>{a.innerHTML=e,a.disabled=!1},1500)}setTimeout(()=>{const a=this.getMatchingSuggestions();this.updateMatchingFilters(),this.showNotification(`✨ ¡Matches actualizados! Encontrados ${a.length} perfiles compatibles`,"success",4e3),setTimeout(()=>{this.showNotification("💡 Tip: Usa los filtros para encontrar exactamente lo que buscas","info",3e3)},2e3)},1500)}editMatchingPreferences(){return this.safeExecute(()=>{this.showNotification("⚙️ Abriendo configuración de matching...","info",2e3);const a=this.getUserMatchingPreferences();this.showModal({title:"⚙️ Configurar Preferencias de Matching",size:"large",content:`\n          <div class="matching-preferences-modal">\n            <div class="preferences-header">\n              <div class="preferences-icon">⚙️</div>\n              <div class="preferences-info">\n                <h3>Personaliza tu Sistema de Matching</h3>\n                <p>Ajusta los criterios para recibir mejores sugerencias de grupos y tandas compatibles</p>\n              </div>\n            </div>\n            <div class="preferences-sections">\n              \x3c!-- Location Preferences --\x3e\n              <div class="preference-section">\n                <h4><i class="fas fa-map-marker-alt"></i> Preferencias de Ubicación</h4>\n                <div class="preference-options">\n                <div class="preference-option">\n                <label>Ciudad preferida:</label>\n                <select id="preferredCity" class="form-select">\n                <option value="any">Cualquier ciudad</option>\n                <option value="tegucigalpa" ${"Tegucigalpa"===a.location?"selected":""}>Tegucigalpa</option>\n                <option value="san-pedro-sula" ${"San Pedro Sula"===a.location?"selected":""}>San Pedro Sula</option>\n                <option value="la-ceiba">La Ceiba</option>\n                <option value="el-progreso">El Progreso</option>\n                </select>\n                </div>\n                <div class="preference-option">\n                <label>Radio máximo (km):</label>\n                <input type="range" id="maxDistance" min="5" max="50" value="${a.maxDistance||20}"\n                oninput="document.getElementById('distanceDisplay').textContent = this.value">\n                <span id="distanceDisplay">${a.maxDistance||20}</span> km\n                </div>\n                </div>\n              </div>\n              \x3c!-- Group Type Preferences --\x3e\n              <div class="preference-section">\n                <h4><i class="fas fa-users"></i> Tipos de Grupos</h4>\n                <div class="preference-checkboxes">\n                <label class="checkbox-option">\n                <input type="checkbox" id="pref_groups" checked>\n                <span class="checkmark"></span>\n                <div class="option-info">\n                <strong>Grupos de Ahorro</strong>\n                <p>Grupos cooperativos tradicionales</p>\n                </div>\n                </label>\n                <label class="checkbox-option">\n                <input type="checkbox" id="pref_tandas" checked>\n                <span class="checkmark"></span>\n                <div class="option-info">\n                <strong>Tandas</strong>\n                <p>Sistemas rotativos de ahorro</p>\n                </div>\n                </label>\n                <label class="checkbox-option">\n                <input type="checkbox" id="pref_people">\n                <span class="checkmark"></span>\n                <div class="option-info">\n                <strong>Conexiones Individuales</strong>\n                <p>Personas para formar nuevos grupos</p>\n                </div>\n                </label>\n                </div>\n              </div>\n              \x3c!-- Amount Preferences --\x3e\n              <div class="preference-section">\n                <h4><i class="fas fa-dollar-sign"></i> Rango de Montos</h4>\n                <div class="preference-options">\n                <div class="preference-option">\n                <label>Monto mínimo (HNL):</label>\n                <select id="minAmount" class="form-select">\n                <option value="500">L. 500</option>\n                <option value="1000" selected>L. 1,000</option>\n                <option value="2000">L. 2,000</option>\n                <option value="5000">L. 5,000</option>\n                <option value="10000">L. 10,000</option>\n                </select>\n                </div>\n                <div class="preference-option">\n                <label>Monto máximo (HNL):</label>\n                <select id="maxAmount" class="form-select">\n                <option value="5000">L. 5,000</option>\n                <option value="10000">L. 10,000</option>\n                <option value="20000" selected>L. 20,000</option>\n                <option value="50000">L. 50,000</option>\n                <option value="100000">L. 100,000+</option>\n                </select>\n                </div>\n                </div>\n              </div>\n              \x3c!-- Experience Level --\x3e\n              <div class="preference-section">\n                <h4><i class="fas fa-star"></i> Nivel de Experiencia</h4>\n                <div class="preference-radio">\n                <label class="radio-option">\n                <input type="radio" name="experienceLevel" value="beginner">\n                <span class="radio-mark"></span>\n                <div class="option-info">\n                <strong>Principiante</strong>\n                <p>Primera vez en tandas</p>\n                </div>\n                </label>\n                <label class="radio-option">\n                <input type="radio" name="experienceLevel" value="intermediate" checked>\n                <span class="radio-mark"></span>\n                <div class="option-info">\n                <strong>Intermedio</strong>\n                <p>Algo de experiencia</p>\n                </div>\n                </label>\n                <label class="radio-option">\n                <input type="radio" name="experienceLevel" value="expert">\n                <span class="radio-mark"></span>\n                <div class="option-info">\n                <strong>Experto</strong>\n                <p>Mucha experiencia en tandas</p>\n                </div>\n                </label>\n                </div>\n              </div>\n              \x3c!-- Notification Preferences --\x3e\n              <div class="preference-section">\n                <h4><i class="fas fa-bell"></i> Notificaciones</h4>\n                <div class="preference-checkboxes">\n                <label class="checkbox-option">\n                <input type="checkbox" id="notify_new_matches" checked>\n                <span class="checkmark"></span>\n                <div class="option-info">\n                <strong>Nuevos Matches</strong>\n                <p>Notificar cuando haya nuevos matches disponibles</p>\n                </div>\n                </label>\n                <label class="checkbox-option">\n                <input type="checkbox" id="notify_recommendations" checked>\n                <span class="checkmark"></span>\n                <div class="option-info">\n                <strong>Recomendaciones</strong>\n                <p>Sugerencias semanales personalizadas</p>\n                </div>\n                </label>\n                </div>\n              </div>\n            </div>\n            <div class="preferences-footer">\n              <div class="preferences-tips">\n                <h5>💡 Consejos para mejores matches:</h5>\n                <ul>\n                <li>Completa tu perfil al 100% para mejores sugerencias</li>\n                <li>Sé específico con tus preferencias de ubicación</li>\n                <li>Ajusta el rango de montos según tu capacidad real</li>\n                <li>Revisa y actualiza estas preferencias regularmente</li>\n                </ul>\n              </div>\n            </div>\n          </div>\n        `,buttons:[{text:"Cancelar",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal()"},{text:"🔄 Restablecer Valores",class:"btn-info",onclick:"advancedGroupsSystem.resetMatchingPreferences()"},{text:"💾 Guardar Preferencias",class:"btn-primary",onclick:"advancedGroupsSystem.saveMatchingPreferences()"}]})},"Configurar preferencias de matching")}saveMatchingPreferences(){return this.safeExecute(()=>{const a={location:document.getElementById("preferredCity")?.value||"any",maxDistance:parseInt(document.getElementById("maxDistance")?.value)||20,minAmount:parseInt(document.getElementById("minAmount")?.value)||1e3,maxAmount:parseInt(document.getElementById("maxAmount")?.value)||2e4,experienceLevel:document.querySelector('input[name="experienceLevel"]:checked')?.value||"intermediate",includeGroups:document.getElementById("pref_groups")?.checked||!0,includeTandas:document.getElementById("pref_tandas")?.checked||!0,includePeople:document.getElementById("pref_people")?.checked||!1,notifyNewMatches:document.getElementById("notify_new_matches")?.checked||!0,notifyRecommendations:document.getElementById("notify_recommendations")?.checked||!0,updatedAt:(new Date).toISOString()};localStorage.setItem("latanda_matching_preferences",JSON.stringify(a)),this.hideModal(),this.showNotification("✅ Preferencias guardadas exitosamente","success",3e3),setTimeout(()=>{this.showNotification("🔄 Aplicando nuevas preferencias...","info",2e3),setTimeout(()=>{this.refreshMatches()},1e3)},1500)},"Guardar preferencias de matching")}resetMatchingPreferences(){return this.safeExecute(()=>{document.getElementById("preferredCity")&&(document.getElementById("preferredCity").value="any"),document.getElementById("maxDistance")&&(document.getElementById("maxDistance").value="20"),document.getElementById("minAmount")&&(document.getElementById("minAmount").value="1000"),document.getElementById("maxAmount")&&(document.getElementById("maxAmount").value="20000"),["pref_groups","pref_tandas","notify_new_matches","notify_recommendations"].forEach(a=>{const e=document.getElementById(a);e&&(e.checked=!0)}),document.getElementById("pref_people")&&(document.getElementById("pref_people").checked=!1);const a=document.querySelector('input[name="experienceLevel"][value="intermediate"]');a&&(a.checked=!0),document.getElementById("distanceDisplay")&&(document.getElementById("distanceDisplay").textContent="20"),this.showNotification("🔄 Preferencias restablecidas a valores predeterminados","info",3e3)},"Restablecer preferencias de matching")}retryLoadMatching(){return this.safeExecute(()=>{const a=document.getElementById("matchingErrorState"),e=document.getElementById("matchingLoadingState");a&&(a.style.display="none"),e&&(e.style.display="block"),this.showNotification("🔄 Reintentando cargar matches...","info",2e3),setTimeout(()=>{this.loadMatchingContent()},1e3)},"Reintentar carga de matching")}showMatchingStates(a){return this.safeExecute(()=>{["matchingLoadingState","matchingErrorState","matchingEmptyState","matchingContainer"].forEach(a=>{const e=document.getElementById(a);e&&(e.style.display="none")});const e=document.getElementById(a);e&&(e.style.display="block")},"Cambiar estado de matching")}enhanceLoadMatchingContent(){return this.safeExecute(()=>{this.showMatchingStates("matchingLoadingState"),this.updateMatchingStatusIndicators({matchesFound:"Cargando...",averageCompatibility:"85%",requestsSent:"0",savedMatches:this.getSavedMatches().length}),setTimeout(()=>{try{const a=this.getMatchingSuggestions();if(a&&a.length>0){this.showMatchingStates("matchingContainer");const e=this.renderMatchingInterface(),n=document.getElementById("matchingContainer");n&&(n.innerHTML=e),this.updateMatchingStatusIndicators({matchesFound:a.length,averageCompatibility:this.calculateAverageCompatibility(a)+"%",requestsSent:this.getRequestsSentCount(),savedMatches:this.getSavedMatches().length}),this.initializeMatchingFeatures(),this.showNotification(`✨ ${a.length} matches cargados exitosamente`,"success",3e3)}else this.showMatchingStates("matchingEmptyState"),this.showNotification("🔍 No se encontraron matches con tus criterios actuales","info",4e3)}catch(a){this.showMatchingStates("matchingErrorState"),this.showNotification("❌ Error al cargar el sistema de matching. Intenta de nuevo.","error",5e3)}},1500)},"Carga mejorada de matching")}updateMatchingStatusIndicators(a){return this.safeExecute(()=>{[{selector:".status-indicator:nth-child(1) .indicator-value",value:a.matchesFound},{selector:".status-indicator:nth-child(2) .indicator-value",value:a.averageCompatibility},{selector:".status-indicator:nth-child(3) .indicator-value",value:a.requestsSent},{selector:".status-indicator:nth-child(4) .indicator-value",value:a.savedMatches}].forEach(a=>{const e=document.querySelector(a.selector);e&&(e.textContent=a.value,e.style.transform="scale(1.1)",setTimeout(()=>{e.style.transform="scale(1)"},200))})},"Actualizar indicadores de estado")}calculateAverageCompatibility(a){if(!a||0===a.length)return 0;const e=a.reduce((a,e)=>a+(e.compatibility||0),0);return Math.round(e/a.length)}getRequestsSentCount(){try{return JSON.parse(localStorage.getItem("latanda_sent_requests")||"[]").length}catch{return 0}}addComprehensiveErrorHandling(){return this.safeExecute(()=>{window.addEventListener("error",a=>{this.showNotification("⚠️ Se detectó un problema. Recargando la página puede ayudar.","warning",5e3)}),window.addEventListener("unhandledrejection",a=>{this.showNotification("⚠️ Error en operación asíncrona. Por favor, intenta de nuevo.","warning",4e3),a.preventDefault()}),this.addUserActionMonitoring()},"Configurar manejo de errores")}addUserActionMonitoring(){return this.safeExecute(()=>{document.addEventListener("click",a=>{const e=a.target;if(e.disabled||e.classList.contains("disabled"))this.showNotification("ℹ️ Esta función no está disponible en este momento","info",2e3);else if("BUTTON"===e.tagName&&!e.onclick&&!e.getAttribute("onclick")){const a=e.textContent.trim();a&&!e.closest(".modal")&&this.showNotification(`⚠️ La función "${a}" aún no está implementada`,"warning",3e3)}}),document.addEventListener("submit",a=>{const e=a.target;e.getAttribute("onsubmit")||e.onsubmit||(a.preventDefault(),this.showNotification("📝 Procesando formulario...","info",2e3))})},"Configurar monitoreo de acciones de usuario")}sortMatches(){const a=document.getElementById("sortMatches")?.value;let e=this.applyMatchingFilters(document.getElementById("matchType")?.value,document.getElementById("locationFilter")?.value,document.getElementById("amountFilter")?.value);e.sort((e,n)=>{switch(a){case"compatibility":return n.compatibility-e.compatibility;case"activity":return n.rating-e.rating;case"location":return e.location.localeCompare(n.location);case"amount":return(n.amount||0)-(e.amount||0);default:return 0}}),this.updateMatchesGrid(e),this.showNotification(`📊 Matches ordenados por ${a}`,"info")}connectWithMatch(a,e){return this.safeExecute(()=>{if(this.showNotification("🔄 Preparando conexión con match...","info",2e3),!a||!e)throw this.showNotification("❌ Error: Información de match incompleta. Por favor, intenta de nuevo.","error"),new Error("Parámetros de match inválidos");const n=this.getMatchingSuggestions().find(e=>e.id===a);if(!n)return void this.showNotification("❌ Match no encontrado. La información puede haber cambiado. Actualiza la página e intenta de nuevo.","error");const t="group"===e?"solicitud de unión":"tanda"===e?"solicitud de participación":"solicitud de conexión",s=this.getMatchRequirements(n),i=this.getUserMatchingProfile();this.showModal({title:"🤝 "+("group"===e?"Solicitar Unirse al Grupo":"tanda"===e?"Participar en Tanda":"Conectar"),content:`\n        <div class="connect-match-modal">\n          <div class="match-connect-header">\n            <div class="match-preview">\n              <div class="match-avatar-preview">\n                ${"group"===n.type?n.icon:"tanda"===n.type?"🔄":"👤"}\n              </div>\n              <div class="match-preview-info">\n                <h3>${n.name}</h3>\n                <p>${n.subtitle}</p>\n                <div class="match-location-compatibility">\n                <span class="location">📍 ${n.location}</span>\n                <span class="compatibility">${n.compatibility}% compatible</span>\n                </div>\n                <div class="compatibility-mini">\n                ${n.compatibility}% Compatibilidad\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class="connect-requirements">\n            <h4><i class="fas fa-clipboard-list"></i> Requisitos y Condiciones</h4>\n            <div class="requirements-grid">\n              ${s.map(a=>`\n                <div class="requirement-item ${a.met?"met":"unmet"}">\n                <i class="fas fa-${a.met?"check-circle":"exclamation-circle"}"></i>\n                <span>${a.text}</span>\n                </div>\n              `).join("")}\n            </div>\n          </div>\n          <div class="user-profile-preview">\n            <h4><i class="fas fa-user"></i> Tu Perfil que Compartiremos</h4>\n            <div class="profile-summary">\n              <div class="profile-stats">\n                <div class="profile-stat">\n                <span class="stat-label">Experiencia:</span>\n                <span class="stat-value">${i.experience}%</span>\n                </div>\n                <div class="profile-stat">\n                <span class="stat-label">Confiabilidad:</span>\n                <span class="stat-value">${i.trustScore}%</span>\n                </div>\n                <div class="profile-stat">\n                <span class="stat-label">Tandas Completadas:</span>\n                <span class="stat-value">${i.completedTandas}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class="match-connect-form">\n            <div class="form-group">\n              <label for="connectMessage">💬 Mensaje de Presentación:</label>\n              <textarea id="connectMessage" class="form-textarea" rows="4"\n                placeholder="¡Hola! Me interesa mucho ${"group"===e?"formar parte de este grupo":"participar en esta tanda"}. ${this.getPersonalizedMessage(n)}"></textarea>\n            </div>\n            <div class="commitment-section">\n              <label class="checkbox-commitment">\n                <input type="checkbox" id="agreeTerms" required>\n                <span>✅ Acepto cumplir con las condiciones y compromisos de este ${e}</span>\n              </label>\n            </div>\n            <div class="connection-steps">\n              <h4><i class="fas fa-route"></i> Pasos del Proceso:</h4>\n              <div class="steps-list">\n                <div class="step-item">\n                <span class="step-number">1</span>\n                <div class="step-content">\n                <strong>Envío de Solicitud</strong>\n                <p>Tu mensaje será enviado al coordinador del ${e}</p>\n                </div>\n                </div>\n                <div class="step-item">\n                <span class="step-number">2</span>\n                <div class="step-content">\n                <strong>Revisión (24-48h)</strong>\n                <p>El coordinador evaluará tu perfil y mensaje</p>\n                </div>\n                </div>\n                <div class="step-item">\n                <span class="step-number">3</span>\n                <div class="step-content">\n                <strong>Respuesta y Contacto</strong>\n                <p>Recibirás una respuesta por WhatsApp/SMS</p>\n                </div>\n                </div>\n                <div class="step-item">\n                <span class="step-number">4</span>\n                <div class="step-content">\n                <strong>Reunión/Integración</strong>\n                <p>Participarás en reunión de bienvenida si eres aceptado</p>\n                </div>\n                </div>\n              </div>\n            </div>\n            <div class="connect-info">\n              <div class="info-item">\n                <i class="fas fa-shield-alt"></i>\n                <span>Tu información está protegida y solo se comparte con matches aprobados</span>\n              </div>\n              <div class="info-item">\n                <i class="fas fa-bell"></i>\n                <span>Te notificaremos por WhatsApp y email sobre la respuesta</span>\n              </div>\n              <div class="info-item">\n                <i class="fas fa-handshake"></i>\n                <span>Proceso 100% transparente y seguro</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      `,buttons:[{text:"Cancelar",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal()"},{text:`📨 Enviar ${t}`,class:"btn-primary",onclick:`advancedGroupsSystem.sendMatchRequest('${a}', '${e}')`},{text:"👁️ Ver Detalles",class:"btn-accent",onclick:`advancedGroupsSystem.hideModal(); setTimeout(() => advancedGroupsSystem.viewMatchDetails('${a}', '${e}'), 300);`}]})})}sendMatchRequest(a,e){const n=document.getElementById("agreeTerms"),t=document.getElementById("connectMessage");n&&n.checked?!t||t.value.trim().length<20?this.showNotification("⚠️ Escribe un mensaje de presentación de al menos 20 caracteres","warning"):(this.hideModal(),this.showModal({title:"📨 Enviando Solicitud...",content:`\n        <div class="sending-progress">\n          <div class="progress-steps">\n            <div class="progress-step active">\n              <div class="step-icon">✅</div>\n              <div class="step-text">Validando información</div>\n            </div>\n            <div class="progress-step active">\n              <div class="step-icon">✅</div>\n              <div class="step-text">Preparando mensaje</div>\n            </div>\n            <div class="progress-step active">\n              <div class="step-icon">📨</div>\n              <div class="step-text">Enviando al coordinador</div>\n            </div>\n            <div class="progress-step">\n              <div class="step-icon">🔔</div>\n              <div class="step-text">Configurando notificaciones</div>\n            </div>\n          </div>\n          <div class="sending-message">\n            <p>Tu solicitud está siendo enviada al coordinador del ${e}...</p>\n            <div class="loading-spinner"></div>\n          </div>\n        </div>\n      `}),setTimeout(()=>{this.hideModal(),this.showSuccessModal(a,e),this.updateMatchCardStatus(a,"pending")},2e3)):this.showNotification("⚠️ Debes aceptar las condiciones para continuar","warning")}showSuccessModal(a,e){const n=this.getMatchingSuggestions().find(e=>e.id===a);this.showModal({title:"🎉 ¡Solicitud Enviada Exitosamente!",content:`\n        <div class="success-modal">\n          <div class="success-icon">✅</div>\n          <h3>Tu solicitud ha sido enviada</h3>\n          <p>El coordinador de <strong>"${n.name}"</strong> ha recibido tu mensaje.</p>\n          <div class="next-steps">\n            <h4>🔔 Próximos Pasos:</h4>\n            <div class="step-list">\n              <div class="step">\n                <span class="step-icon">📱</span>\n                <span>Te notificaremos por WhatsApp cuando haya una respuesta</span>\n              </div>\n              <div class="step">\n                <span class="step-icon">⏰</span>\n                <span>Respuesta esperada en 24-48 horas</span>\n              </div>\n              <div class="step">\n                <span class="step-icon">💬</span>\n                <span>El coordinador puede contactarte directamente</span>\n              </div>\n            </div>\n          </div>\n          <div class="contact-info">\n            <p><strong>📞 ¿Necesitas ayuda?</strong></p>\n            <p>Contáctanos al WhatsApp: +504 9999-9999</p>\n          </div>\n        </div>\n      `,buttons:[{text:"🔍 Ver Otros Matches",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal()"},{text:"👁️ Ver Detalles del Grupo",class:"btn-primary",onclick:`advancedGroupsSystem.hideModal(); setTimeout(() => advancedGroupsSystem.viewMatchDetails('${a}', '${e}'), 300);`}]})}updateMatchCardStatus(a,e){const n=document.querySelector(`[data-match-id="${a}"]`);if(n){const a=n.querySelector(".btn-primary");if(a)switch(e){case"pending":a.innerHTML='<i class="fas fa-clock"></i> Solicitud Enviada',a.classList.add("btn-warning"),a.classList.remove("btn-primary"),a.disabled=!0;break;case"accepted":a.innerHTML='<i class="fas fa-check"></i> Aceptado',a.classList.add("btn-success"),a.classList.remove("btn-primary")}}}viewMatchDetails(a,e){return this.safeExecute(()=>{if(this.showNotification("🔍 Cargando información detallada...","info",3e3),!a||!e)throw this.showNotification("❌ Error: No se puede cargar la información. Datos de match incompletos.","error"),new Error("Parámetros de match inválidos para ver detalles");const n=this.getMatchingSuggestions().find(e=>e.id===a);if(!n)return void this.showNotification("❌ Match no encontrado. La información puede haber cambiado. Regresa a la lista de matches y intenta de nuevo.","error",5e3);this.trackUserAction("view_match_details",{matchId:a,matchType:e});const t=this.getDetailedMatchInfo(n),s=this.getSimilarMatches(a);this.showModal({title:`📋 ${n.name} - Información Completa`,size:"large",content:`\n        <div class="match-details-modal">\n          <div class="match-detail-header">\n            <div class="match-avatar-large">\n              ${"group"===n.type?n.icon:"tanda"===n.type?"🔄":"👤"}\n            </div>\n            <div class="match-detail-info">\n              <h3>${n.name}</h3>\n              <p class="match-subtitle-large">${n.subtitle}</p>\n              <div class="match-detail-stats">\n                <div class="detail-stat">\n                <span class="stat-icon">📍</span>\n                <span class="stat-value">${n.location}</span>\n                </div>\n                <div class="detail-stat">\n                <span class="stat-icon">⭐</span>\n                <span class="stat-value">${n.rating}/5.0</span>\n                </div>\n                <div class="detail-stat">\n                <span class="stat-icon">👥</span>\n                <span class="stat-value">${n.members} miembros</span>\n                </div>\n                ${n.amount?`\n                <div class="detail-stat">\n                <span class="stat-icon">💰</span>\n                <span class="stat-value">L. ${n.amount.toLocaleString()}</span>\n                </div>\n                `:""}\n              </div>\n            </div>\n            <div class="compatibility-large">\n              <div class="compatibility-circle-large">\n                <span class="compatibility-percent-large">${n.compatibility}%</span>\n              </div>\n              <span class="compatibility-label-large">Compatible</span>\n            </div>\n          </div>\n          <div class="match-description-section">\n            <h4>📄 Descripción:</h4>\n            <p>${t.fullDescription}</p>\n          </div>\n          <div class="match-details-grid">\n            <div class="detail-column">\n              <h4>📋 Información del ${"group"===n.type?"Grupo":"Tanda"}:</h4>\n              <div class="info-list">\n                ${"group"===n.type?`\n                <div class="info-item">\n                <span class="info-label">Tipo de Grupo:</span>\n                <span class="info-value">${t.groupType}</span>\n                </div>\n                <div class="info-item">\n                <span class="info-label">Fundado:</span>\n                <span class="info-value">${t.founded}</span>\n                </div>\n                <div class="info-item">\n                <span class="info-label">Reuniones:</span>\n                <span class="info-value">${t.meetingSchedule}</span>\n                </div>\n                `:`\n                <div class="info-item">\n                <span class="info-label">Duración:</span>\n                <span class="info-value">${t.duration}</span>\n                </div>\n                <div class="info-item">\n                <span class="info-label">Frecuencia de Pago:</span>\n                <span class="info-value">${t.paymentFrequency}</span>\n                </div>\n                <div class="info-item">\n                <span class="info-label">Inicio:</span>\n                <span class="info-value">${t.startDate}</span>\n                </div>\n                `}\n                <div class="info-item">\n                <span class="info-label">Coordinador:</span>\n                <span class="info-value">${t.coordinator}</span>\n                </div>\n                <div class="info-item">\n                <span class="info-label">Experiencia:</span>\n                <span class="info-value">${t.coordinatorExperience}</span>\n                </div>\n              </div>\n            </div>\n            <div class="detail-column">\n              <h4>🎯 Requisitos para Unirse:</h4>\n              <div class="requirements-list">\n                ${this.getMatchRequirements(n).map(a=>`\n                <div class="requirement-item ${a.met?"met":"unmet"}">\n                <i class="fas fa-${a.met?"check-circle":"exclamation-circle"}"></i>\n                <span>${a.text}</span>\n                ${a.met?'<span class="req-ok">✅ Cumples</span>':'<span class="req-action">⚠️ Requerido</span>'}\n                </div>\n                `).join("")}\n              </div>\n            </div>\n          </div>\n          <div class="benefits-section">\n            <h4>💎 Beneficios de Unirse:</h4>\n            <div class="benefits-grid">\n              ${t.benefits.map(a=>`\n              <div class="benefit-item">\n                <span class="benefit-icon">${a.icon}</span>\n                <div class="benefit-text">\n                <strong>${a.title}</strong>\n                <p>${a.description}</p>\n                </div>\n              </div>\n              `).join("")}\n            </div>\n          </div>\n          <div class="contact-section">\n            <h4>📞 Información de Contacto:</h4>\n            <div class="contact-methods">\n              <div class="contact-method">\n                <span class="contact-icon">📱</span>\n                <span>WhatsApp: ${t.whatsapp}</span>\n              </div>\n              <div class="contact-method">\n                <span class="contact-icon">📧</span>\n                <span>Email: ${t.email}</span>\n              </div>\n              <div class="contact-method">\n                <span class="contact-icon">📍</span>\n                <span>Dirección: ${t.address}</span>\n              </div>\n            </div>\n          </div>\n          ${s.length>0?`\n          <div class="similar-matches-section">\n            <h4>🔍 Matches Similares:</h4>\n            <div class="similar-matches-grid">\n              ${s.map(a=>`\n              <div class="similar-match-card" onclick="advancedGroupsSystem.viewMatchDetails('${a.id}', '${a.type}')">\n                <div class="similar-avatar">${"group"===a.type?a.icon:"tanda"===a.type?"🔄":"👤"}</div>\n                <div class="similar-info">\n                <strong>${a.name}</strong>\n                <p>${a.compatibility}% compatible</p>\n                </div>\n              </div>\n              `).join("")}\n            </div>\n          </div>\n          `:""}\n        </div>\n      `,buttons:[{text:"Cerrar",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal()"},{text:"💾 Guardar Match",class:"btn-info",onclick:`advancedGroupsSystem.saveMatch('${a}')`},{text:"🤝 Solicitar Unirse",class:"btn-primary",onclick:`advancedGroupsSystem.hideModal(); setTimeout(() => advancedGroupsSystem.connectWithMatch('${a}', '${e}'), 300);`}]})})}getUserMatchingProfile(){return{experience:85,trustScore:96,completedTandas:7,totalSavings:35e3,location:"Tegucigalpa",memberSince:"2023-01-15",averageRating:4.8}}getMatchRequirements(a){const e=this.getUserMatchingProfile(),n=[];if(!a||!a.type)return n;if("group"===a.type||"tanda"===a.type){n.push({text:"Ser mayor de 18 años",met:!0,type:"age"}),n.push({text:"Verificación de identidad completada",met:e.trustScore>=70,type:"identity"});const t=3*a.monthlyContribution;n.push({text:`Capacidad de ahorro mínima: L. ${t.toLocaleString()}`,met:e.totalSavings>=t,type:"savings"});const s=a.trustRequirement||75;if(n.push({text:`Puntaje de confianza mínimo: ${s}%`,met:e.trustScore>=s,type:"trust"}),"group"===a.type&&a.locationRequired){const t=e.location===a.location;n.push({text:`Ubicación en ${a.location}`,met:t,type:"location"})}a.experienceRequired&&n.push({text:`Experiencia mínima: ${a.experienceRequired} tandas completadas`,met:e.completedTandas>=a.experienceRequired,type:"experience"}),a.monthlyContribution>=2e3&&n.push({text:"Comprobante de ingresos requerido",met:e.experience>=80,type:"income"}),a.referencesRequired&&n.push({text:`${a.referencesRequired} referencias personales`,met:e.averageRating>=4.5,type:"references"})}else"person"===a.type&&(n.push({text:"Perfil profesional completado",met:!0,type:"profile"}),n.push({text:"Historial de tandas positivo",met:e.averageRating>=4,type:"history"}));return a.tags?.includes("Premium")&&n.push({text:"Membresía Premium activa",met:e.experience>=90,type:"membership"}),a.tags?.includes("Empresarial")&&n.push({text:"Verificación empresarial completada",met:e.trustScore>=85,type:"business"}),n}getPersonalizedMessage(a){return"tanda"===a.type?`Tengo experiencia en ${this.getUserMatchingProfile().completedTandas} tandas completadas y mi objetivo actual es ${a.tags.includes("Vivienda")?"ahorrar para vivienda":a.tags.includes("Vacaciones")?"ahorrar para vacaciones":"fortalecer mis ahorros"}.`:"group"===a.type?"Busco un grupo comprometido donde pueda aportar mi experiencia en ahorro cooperativo y aprender de otros miembros.":"Me parece muy interesante tu experiencia profesional y creo que podríamos colaborar muy bien en proyectos de tandas."}sendEnhancedMatchRequest(a,e){const n=document.getElementById("agreeTerms")?.checked;if(document.getElementById("connectMessage"),!n)return void this.showNotification("⚠️ Debes aceptar los términos y condiciones","warning");const t=document.querySelector(".modal-content");t&&(t.innerHTML='\n        <div class="sending-request-modal">\n          <div class="sending-animation">\n            <div class="sending-spinner">\n              <div class="spinner-ring"></div>\n            </div>\n            <h3>📨 Enviando Solicitud...</h3>\n            <div class="sending-steps">\n              <div class="step active">✅ Validando información</div>\n              <div class="step active">✅ Preparando perfil</div>\n              <div class="step active">✅ Enviando solicitud</div>\n              <div class="step">⏳ Notificando al destinatario</div>\n            </div>\n          </div>\n        </div>\n      '),setTimeout(()=>{const n=document.querySelectorAll(".step");n[3]&&(n[3].classList.add("active"),n[3].innerHTML="✅ Solicitud enviada exitosamente"),setTimeout(()=>{this.closeModal(),this.showNotification("🎉 ¡Solicitud enviada exitosamente! Te notificaremos cuando recibas respuesta.","success"),this.updateMatchCardStatus(a,"pending"),setTimeout(()=>{this.showFollowUpActions(a,e)},2e3)},1500)},2e3)}updateMatchCardStatus(a,e){const n=document.querySelector(`[data-match-id="${a}"]`);if(n){const a=n.querySelector(".btn-primary");if(a)switch(e){case"pending":a.innerHTML='<i class="fas fa-clock"></i> Solicitud Enviada',a.classList.add("disabled","btn-pending"),a.disabled=!0;break;case"accepted":a.innerHTML='<i class="fas fa-check-circle"></i> ¡Aceptado!',a.classList.add("btn-success");break;case"declined":a.innerHTML='<i class="fas fa-times-circle"></i> No Aceptado',a.classList.add("btn-declined")}const t=document.createElement("div");t.className=`match-status-indicator ${e}`,t.innerHTML={pending:'<i class="fas fa-clock"></i> Pendiente',accepted:'<i class="fas fa-check-circle"></i> Aceptado',declined:'<i class="fas fa-times-circle"></i> Rechazado'}[e]||"";const s=n.querySelector(".match-header");s&&!n.querySelector(".match-status-indicator")&&s.appendChild(t)}}showFollowUpActions(a,e){const n=this.getMatchingSuggestions().find(e=>e.id===a);this.showNotification(`\n      <div class="follow-up-notification">\n        <strong>📬 Próximos pasos:</strong><br>\n        • Te notificaremos por email cuando ${n?.name} responda<br>\n        • Puedes ver el estado en tu bandeja de solicitudes<br>\n        • Mientras tanto, ¡sigue explorando más matches!\n      </div>\n    `,"info",8e3)}getDetailedMatchInfo(a){const e={maxMembers:"tanda"===a.type?Math.min(a.members+4,20):a.members+Math.floor(10*Math.random())+5,reviewCount:Math.floor(50*Math.random())+10,createdDate:new Date(Date.now()-365*Math.random()*24*60*60*1e3).toLocaleDateString("es-HN")};return"tanda"===a.type?{...e,duration:a.tags.includes("Corto Plazo")?"6 meses":a.tags.includes("Largo Plazo")?"2 años":"12 meses",members:this.generateTandaMembers(a),recentActivity:this.generateTandaActivity()}:{...e,members:this.generateGroupMembers(a),recentActivity:this.generateGroupActivity()}}generateTandaMembers(a){const e=["Coordinador","Tesorero","Participante","Secretario"],n=["Ana García","Carlos Méndez","María López","José Rivera","Carmen Flores","Luis Ortega"],t=["👩‍💼","👨‍💼","👩‍🏫","👨‍🔧","👩‍⚕️","👨‍🍳"];return Array.from({length:Math.min(a.members,6)},(a,s)=>({name:n[s%n.length],role:0===s?"Coordinador":e[Math.floor(Math.random()*(e.length-1))+1],avatar:t[s%t.length],rating:(4.2+.8*Math.random()).toFixed(1)}))}generateGroupMembers(a){const e=["Fundador","Administrador","Miembro Activo","Miembro Nuevo"],n=["Roberto Silva","Elena Castillo","Fernando Díaz","Sofía Morales","Diego Vargas","Lucia Herrera"],t=["👨‍💼","👩‍💼","👨‍🎓","👩‍🎓","👨‍🏭","👩‍🔬"];return Array.from({length:Math.min(a.members,6)},(a,s)=>({name:n[s%n.length],role:0===s?"Fundador":e[Math.floor(Math.random()*(e.length-1))+1],avatar:t[s%t.length],rating:(4+1*Math.random()).toFixed(1)}))}generateTandaActivity(){return[{icon:"💰",text:"Pago mensual completado por todos los miembros",date:"Hace 2 días"},{icon:"🎉",text:"María López recibió su tanda del mes",date:"Hace 5 días"},{icon:"👥",text:"Reunión mensual completada",date:"Hace 1 semana"},{icon:"📊",text:"Informe financiero compartido",date:"Hace 10 días"},{icon:"✅",text:"Verificación de pagos completada",date:"Hace 2 semanas"}]}generateGroupActivity(){return[{icon:"🤝",text:"Nuevo miembro aprobado y bienvenido",date:"Hace 1 día"},{icon:"💡",text:"Propuesta de nueva tanda presentada",date:"Hace 3 días"},{icon:"📅",text:"Próxima reunión programada",date:"Hace 4 días"},{icon:"📈",text:"Informe de rendimiento del grupo",date:"Hace 1 semana"},{icon:"🎯",text:"Meta de ahorro grupal alcanzada",date:"Hace 2 semanas"}]}getSimilarMatches(a){const e=this.getMatchingSuggestions(),n=e.find(e=>e.id===a);return n?e.filter(e=>e.id!==a).filter(a=>a.type===n.type||a.location===n.location||a.tags.some(a=>n.tags.includes(a))).slice(0,3):[]}getMatchTypeLabel(a){return{group:"👥 Grupo Cooperativo",tanda:"🔄 Tanda Activa",person:"👤 Persona Individual"}[a]||"Match"}quickSort(a){document.querySelectorAll(".sort-btn").forEach(a=>a.classList.remove("active")),document.querySelector(`[onclick="advancedGroupsSystem.quickSort('${a}')"]`)?.classList.add("active"),this.currentSortBy=a,this.updateMatchingFilters(),this.showNotification(`📊 Ordenado por ${this.getSortLabel(a)}`,"info",2e3)}getSortLabel(a){return{compatibility:"compatibilidad",activity:"actividad reciente",location:"cercanía",amount:"monto de ahorro"}[a]||a}setViewMode(a){document.querySelectorAll(".view-btn").forEach(a=>a.classList.remove("active")),document.querySelector(`[onclick="advancedGroupsSystem.setViewMode('${a}')"]`)?.classList.add("active");const e=document.getElementById("matchesGrid");if(e){e.className=`matches-grid ${a}`;const n=this.applyMatchingFilters(document.getElementById("matchType")?.value,document.getElementById("locationFilter")?.value,document.getElementById("amountFilter")?.value);e.innerHTML="list"===a?n.map(a=>this.renderListMatchCard(a)).join(""):"compact"===a?n.map(a=>this.renderCompactMatchCard(a)).join(""):n.map(a=>this.renderOptimizedMatchCard(a)).join(""),this.addMatchCardEffects()}this.showNotification(`👁️ Vista ${a} activada`,"info",2e3)}renderListMatchCard(a){const e=a.compatibility>=90?"#00ffff":a.compatibility>=75?"#7fff7f":a.compatibility>=60?"#ffff7f":"#ff7f7f";return`\n      <div class="match-card list-view" data-match-id="${a.id}" data-type="${a.type}">\n        <div class="match-list-content">\n          <div class="match-list-left">\n            <div class="match-avatar-list">\n              ${"group"===a.type?a.icon:"tanda"===a.type?"🔄":"👤"}\n            </div>\n            <div class="match-info-list">\n              <h4 class="match-title-list">${a.name}</h4>\n              <p class="match-subtitle-list">${a.subtitle}</p>\n              <div class="match-stats-inline">\n                <span>📍 ${a.location}</span>\n                <span>👥 ${a.members}</span>\n                <span>⭐ ${a.rating}</span>\n                ${a.amount?`<span>💰 L. ${a.amount.toLocaleString()}</span>`:""}\n              </div>\n            </div>\n          </div>\n          <div class="match-list-center">\n            <div class="compatibility-badge-list" style="background: ${e}33; border: 1px solid ${e}66;">\n              ${a.compatibility}%\n            </div>\n            <div class="match-tags-inline">\n              ${a.tags.slice(0,3).map(a=>`<span class="tag-inline">${a}</span>`).join("")}\n            </div>\n          </div>\n          <div class="match-list-right">\n            <div class="match-actions-list">\n              <button class="btn btn-primary compact" onclick="advancedGroupsSystem.connectWithMatch('${a.id}', '${a.type}')">\n                <i class="fas fa-handshake"></i>\n                ${"group"===a.type?"Unirse":"tanda"===a.type?"Participar":"Conectar"}\n              </button>\n              <button class="btn btn-secondary compact" onclick="advancedGroupsSystem.viewMatchDetails('${a.id}', '${a.type}')">\n                <i class="fas fa-eye"></i>\n                Ver\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    `}renderCompactMatchCard(a){return`\n      <div class="match-card compact-view" data-match-id="${a.id}" data-type="${a.type}">\n        <div class="match-compact-content">\n          <div class="match-compact-left">\n            <div class="match-avatar-compact">\n              ${"group"===a.type?a.icon:"tanda"===a.type?"🔄":"👤"}\n            </div>\n            <div class="compatibility-compact">${a.compatibility}%</div>\n          </div>\n          <div class="match-compact-center">\n            <h5 class="match-title-compact">${a.name}</h5>\n            <div class="match-essential-info">\n              <span>📍 ${a.location}</span>\n              <span>👥 ${a.members}</span>\n              ${a.amount?`<span>💰 L. ${(a.amount/1e3).toFixed(0)}K</span>`:""}\n            </div>\n          </div>\n          <div class="match-compact-right">\n            <button class="btn btn-primary micro" onclick="advancedGroupsSystem.connectWithMatch('${a.id}', '${a.type}')" title="${"group"===a.type?"Solicitar unirse":"Participar"}">\n              <i class="fas fa-handshake"></i>\n            </button>\n            <button class="btn btn-secondary micro" onclick="advancedGroupsSystem.viewMatchDetails('${a.id}', '${a.type}')" title="Ver detalles">\n              <i class="fas fa-eye"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n    `}showModal(a){const{title:e,content:n,size:t="large",buttons:s=[]}=a;this.hideModal();const i=`\n      <div class="modal-overlay" id="modalOverlay">\n        <div class="modal-container ${t}" id="modalContainer">\n          <div class="modal-header">\n            <h3 class="modal-title">${e}</h3>\n            <button class="modal-close" onclick="advancedGroupsSystem.hideModal()">\n              <i class="fas fa-times"></i>\n            </button>\n          </div>\n          <div class="modal-content">\n            ${n}\n          </div>\n          ${s.length>0?`\n          <div class="modal-footer">\n            ${s.map(a=>`\n              <button class="btn ${a.class||"btn-secondary"}" onclick="${a.onclick||"advancedGroupsSystem.hideModal()"}">\n                ${a.icon?`<i class="${a.icon}"></i>`:""}\n                <span>${a.text}</span>\n              </button>\n            `).join("")}\n          </div>\n          `:""}\n        </div>\n      </div>\n    `;document.body.insertAdjacentHTML("beforeend",i);const o=document.getElementById("modalOverlay");o.addEventListener("click",a=>{a.target===o&&this.hideModal()}),requestAnimationFrame(()=>{o.style.opacity="1",document.getElementById("modalContainer").style.transform="translate(-50%, -50%) scale(1)"})}hideModal(){const a=document.getElementById("modalOverlay");a&&(a.style.opacity="0",document.getElementById("modalContainer").style.transform="translate(-50%, -50%) scale(0.8)",setTimeout(()=>{a.remove()},300))}getLoadingHTML(a="Cargando..."){return`\n      <div class="loading-container">\n        <div class="loading-spinner"></div>\n        <p class="loading-message">${a}</p>\n      </div>\n    `}getErrorHTML(a="Ha ocurrido un error"){return`\n      <div class="error-container">\n        <div class="error-icon">\n          <i class="fas fa-exclamation-triangle"></i>\n        </div>\n        <p class="error-message">${a}</p>\n        <button class="btn btn-secondary" onclick="advancedGroupsSystem.hideModal()">\n          <span>Cerrar</span>\n        </button>\n      </div>\n    `}animateChartBars(){document.querySelectorAll(".chart-bar").forEach((a,e)=>{setTimeout(()=>{const e=80*Math.random()+20;a.style.height=`${e}%`,a.style.transform="scaleY(1)",a.style.boxShadow=e>70?"0 0 20px rgba(0, 255, 255, 0.6)":e>40?"0 0 15px rgba(34, 197, 94, 0.5)":"0 0 10px rgba(239, 68, 68, 0.4)"},100*e)})}startPeriodicUpdates(){setInterval(()=>{this.updateStatsDisplay(),this.animateWeb3Stats()},8e3),setInterval(()=>{this.animateChartBars()},12e3),setInterval(()=>{this.updatePortfolioMetrics()},3e3)}updatePortfolioMetrics(){const a=document.querySelector(".portfolio-value");if(a){const e=this.userStats.portfolioTVL,n=.02*(Math.random()-.5),t=e*(1+n);a.textContent=`L. ${this.formatNumber(t)}`,a.style.animation="none",setTimeout(()=>{a.style.animation=n>0?"portfolio-up 0.5s ease-out":"portfolio-down 0.5s ease-out"},10)}const e=document.querySelector(".apy-value");if(e){const a=9.7,n=a+.4*(Math.random()-.5);e.textContent=`+${n.toFixed(1)}%`,e.style.color=n>a?"#22c55e":"#ef4444"}}openKYC(){this.showModal({title:"🆔 Verificación KYC",content:'\n        <div class="kyc-modal-content">\n          <div class="kyc-header">\n            <div class="kyc-icon">\n              <i class="fas fa-shield-alt"></i>\n            </div>\n            <h4>Verificación de Identidad</h4>\n            <p>Completa tu verificación KYC para acceder a todas las funcionalidades</p>\n          </div>\n          <div class="kyc-status">\n            <div class="status-item">\n              <span class="status-icon verified"><i class="fas fa-check"></i></span>\n              <span>Información básica</span>\n            </div>\n            <div class="status-item">\n              <span class="status-icon verified"><i class="fas fa-check"></i></span>\n              <span>Número de teléfono</span>\n            </div>\n            <div class="status-item">\n              <span class="status-icon pending"><i class="fas fa-clock"></i></span>\n              <span>Verificación de documento</span>\n            </div>\n            <div class="status-item">\n              <span class="status-icon pending"><i class="fas fa-clock"></i></span>\n              <span>Verificación facial</span>\n            </div>\n          </div>\n          <div class="kyc-actions">\n            <button class="btn btn-primary" onclick="window.open(\'/kyc-registration.html\', \'_blank\')">\n              <i class="fas fa-external-link-alt"></i>\n              Continuar Verificación\n            </button>\n            <button class="btn btn-secondary" onclick="advancedGroupsSystem.hideModal()">\n              <i class="fas fa-times"></i>\n              Cerrar\n            </button>\n          </div>\n        </div>\n      ',size:"medium"})}showAudit(){this.showModal({title:"📊 Auditoría del Sistema",content:'\n        <div class="audit-modal-content">\n          <div class="audit-header">\n            <div class="audit-icon">\n              <i class="fas fa-search"></i>\n            </div>\n            <h4>Auditoría de Seguridad</h4>\n            <p>Reporte completo de la seguridad y transparencia del sistema</p>\n          </div>\n          <div class="audit-stats">\n            <div class="audit-stat">\n              <span class="stat-number">98.5%</span>\n              <span class="stat-label">Smart Contract Success</span>\n              <span class="stat-trend positive">↗ +2.1%</span>\n            </div>\n            <div class="audit-stat">\n              <span class="stat-number">100%</span>\n              <span class="stat-label">Funds Security</span>\n              <span class="stat-trend positive">✓ Secured</span>\n            </div>\n            <div class="audit-stat">\n              <span class="stat-number">24/7</span>\n              <span class="stat-label">Monitoring</span>\n              <span class="stat-trend">🟢 Active</span>\n            </div>\n          </div>\n          <div class="audit-details">\n            <h5>Últimas Auditorías</h5>\n            <div class="audit-item">\n              <span class="audit-date">2024-08-20</span>\n              <span class="audit-type">Smart Contracts</span>\n              <span class="audit-result success">✅ Aprobado</span>\n            </div>\n            <div class="audit-item">\n              <span class="audit-date">2024-08-15</span>\n              <span class="audit-type">Security Infrastructure</span>\n              <span class="audit-result success">✅ Aprobado</span>\n            </div>\n            <div class="audit-item">\n              <span class="audit-date">2024-08-10</span>\n              <span class="audit-type">Financial Reserves</span>\n              <span class="audit-result success">✅ Aprobado</span>\n            </div>\n          </div>\n          <div class="audit-actions">\n            <button class="btn btn-primary" onclick="alert(\'Descargando reporte completo...\')">\n              <i class="fas fa-download"></i>\n              Descargar Reporte\n            </button>\n            <button class="btn btn-secondary" onclick="advancedGroupsSystem.hideModal()">\n              <i class="fas fa-times"></i>\n              Cerrar\n            </button>\n          </div>\n        </div>\n      ',size:"large"})}getGroupTandasCount(a){const e=this.groups.find(e=>e.id===a);return e?this.generateSimpleTandas(e).length:0}generateSimpleTandas(a){return a.members<=1||(!a.created||new Date-new Date(a.created)<864e5)&&a.members<3?[]:[{id:`tanda-${a.id}-1`,name:`Tanda de ${a.name}`,groupId:a.id,position:1,totalAmount:a.contribution*a.members,contributionPerCycle:a.contribution,currentCycle:1,totalCycles:a.members,status:a.members>=3?"ready":"forming",beneficiary:a.admin_name||"Coordinador",nextPaymentDate:new Date(Date.now()+6048e5).toISOString().split("T")[0],participants:a.members}]}calculateSimpleTotal(a){return a.reduce((a,e)=>a+e.contributionPerCycle*e.currentCycle,0)}calculateSimplePending(a){return a.reduce((a,e)=>{const n=e.totalAmount-e.contributionPerCycle*e.currentCycle;return a+Math.max(0,n)},0)}calculateSimpleCompletion(a){if(0===a.length)return 0;const e=a.reduce((a,e)=>a+e.currentCycle/e.totalCycles,0);return Math.round(e/a.length*100)}renderSimpleTanda(a,e){const n=a.currentCycle/a.totalCycles*100;return a.currentCycle,a.totalCycles,`\n      <div class="tanda-card-detailed">\n        <div class="tanda-header">\n          <div class="tanda-info">\n            <h4>${a.name}</h4>\n            <div class="tanda-meta">\n              <span class="tanda-position">Posición ${a.position}</span>\n              <span class="tanda-status status-${a.status}">\n                ${"active"===a.status?"🟢 Activa":"pending"===a.status?"🟡 Pendiente":"🔴 Finalizada"}\n              </span>\n            </div>\n          </div>\n          <div class="tanda-beneficiary">\n            <span class="beneficiary-label">Beneficiario Actual:</span>\n            <span class="beneficiary-name">${a.beneficiary}</span>\n          </div>\n        </div>\n        <div class="tanda-progress-section">\n          <div class="progress-info">\n            <span>Progreso: ${a.currentCycle}/${a.totalCycles} ciclos</span>\n            <span class="progress-percentage">${Math.round(n)}%</span>\n          </div>\n          <div class="progress-bar">\n            <div class="progress-fill" style="width: ${n}%"></div>\n          </div>\n        </div>\n        <div class="tanda-stats">\n          <div class="stat-item">\n            <span class="stat-label">Monto Total</span>\n            <span class="stat-value">L. ${a.totalAmount.toLocaleString()}</span>\n          </div>\n          <div class="stat-item">\n            <span class="stat-label">Por Ciclo</span>\n            <span class="stat-value">L. ${a.contributionPerCycle.toLocaleString()}</span>\n          </div>\n          <div class="stat-item">\n            <span class="stat-label">Participantes</span>\n            <span class="stat-value">${a.participants}</span>\n          </div>\n          <div class="stat-item">\n            <span class="stat-label">Próximo Pago</span>\n            <span class="stat-value">${a.nextPaymentDate}</span>\n          </div>\n        </div>\n        <div class="tanda-actions">\n          <button class="btn btn-sm btn-primary" onclick="advancedGroupsSystem.viewTandaDetails('${a.id}')">\n            <i class="fas fa-eye"></i> Ver Detalles\n          </button>\n          ${"active"===a.status?`\n            <button class="btn btn-sm btn-success" onclick="advancedGroupsSystem.makePayment('${a.id}')">\n              <i class="fas fa-credit-card"></i> Hacer Pago\n            </button>\n          `:""}\n        </div>\n      </div>\n    `}generateGroupMembers(a){const e=["María González","Carlos Hernández","Ana Martínez","Luis García","Carmen López","José Rodríguez","Patricia Morales","Miguel Santos"];return Array.from({length:Math.min(a.members,8)},(n,t)=>({id:`member-${a.id}-${t+1}`,nombre:e[t]||`Miembro ${t+1}`,rol:0===t&&a.isOwner?"Coordinador":"Participante",fechaIngreso:new Date(Date.now()-90*Math.random()*24*60*60*1e3).toISOString().split("T")[0],contribucionTotal:a.contribution*(Math.floor(10*Math.random())+1),estado:Math.random()>.1?"Activo":"Pendiente",telefono:`+504 ${Math.floor(9e7*Math.random())+1e7}`,email:`${e[t]?.toLowerCase().replace(" ",".")||`miembro${t+1}`}@email.com`}))}generateGroupTransactions(a){const e=["Contribución","Pago de Tanda","Bonificación","Multa","Interés"],n=["María González","Carlos Hernández","Ana Martínez","Luis García"];return Array.from({length:Math.min(15,3*a.members)},(t,s)=>({id:`tx-${a.id}-${s+1}`,fecha:new Date(Date.now()-30*Math.random()*24*60*60*1e3).toISOString(),tipo:e[Math.floor(Math.random()*e.length)],monto:Math.floor(Math.random()*a.contribution*2)+.5*a.contribution,de:n[Math.floor(Math.random()*n.length)],para:Math.random()>.5?"Fondo Común":n[Math.floor(Math.random()*n.length)],estado:Math.random()>.1?"Completada":"Pendiente",descripcion:`Transacción de ${e[Math.floor(Math.random()*e.length)].toLowerCase()}`}))}downloadFile(a,e,n){const t=new Blob([a],{type:n}),s=URL.createObjectURL(t),i=document.createElement("a");i.href=s,i.download=e,document.body.appendChild(i),i.click(),document.body.removeChild(i),URL.revokeObjectURL(s)}formatNumber(a){return a>=1e6?(a/1e6).toFixed(1)+"M":a>=1e3?(a/1e3).toFixed(1)+"K":a.toLocaleString()}formatCurrency(a){return`L. ${(Number(a)||0).toLocaleString()}`}getPaymentsPerMonth(a){return{weekly:4,biweekly:2,monthly:1}[a]||1}updateStatsDisplay(){try{this.userStats=this.calculateUserStats();const a={totalGroups:document.querySelector('.stat-value[data-stat="totalGroups"]'),totalTandas:document.querySelector('.stat-value[data-stat="totalTandas"]'),totalSavings:document.querySelector('.stat-value[data-stat="totalSavings"]'),trustScore:document.querySelector('.stat-value[data-stat="trustScore"]')};Object.keys(a).forEach(e=>{const n=a[e];n&&void 0!==this.userStats[e]&&(n.textContent="totalSavings"===e?`L. ${this.formatNumber(this.userStats[e])}`:"trustScore"===e?`${this.userStats[e]}%`:this.userStats[e])})}catch(a){}}saveMatch(a){return this.safeExecute(()=>{if(!a)return void this.showNotification("❌ Error: No se puede guardar. ID de match inválido.","error");let e=JSON.parse(localStorage.getItem("latanda_saved_matches")||"[]");const n=this.getMatchingSuggestions().find(e=>e.id===a);if(n){if(e.some(e=>e.id===a))e=e.filter(e=>e.id!==a),this.showNotification(`📤 "${n.name}" removido de tus favoritos`,"info",3e3),document.querySelectorAll(`[onclick*="saveMatch('${a}')"]`).forEach(a=>{a.innerHTML='<i class="fas fa-bookmark"></i>',a.classList.remove("saved"),a.style.color="",a.style.background="",a.title="Guardar match"});else{const t={...n,savedAt:(new Date).toISOString(),savedReason:"Manual save"};e.push(t),this.showNotification(`💾 "${n.name}" guardado en tus favoritos`,"success",4e3),document.querySelectorAll(`[onclick*="saveMatch('${a}')"]`).forEach(a=>{a.innerHTML='<i class="fas fa-bookmark"></i>',a.classList.add("saved"),a.style.color="var(--tanda-cyan)",a.style.background="rgba(0, 255, 255, 0.1)",a.title="Guardado en favoritos"}),1===e.length&&setTimeout(()=>{this.showNotification('📜 Accede a tus matches guardados desde el botón "Guardados" en la parte superior',"info",4e3)},2e3)}localStorage.setItem("latanda_saved_matches",JSON.stringify(e)),this.updateSavedMatchesCount(e.length)}else this.showNotification("❌ Match no encontrado. La información puede haber cambiado.","error")},"Guardar match")}updateSavedMatchesCount(a){const e=document.getElementById("savedMatchesCount");e&&(e.textContent=a,e.style.display=a>0?"inline":"none")}getSavedMatches(){try{return JSON.parse(localStorage.getItem("latanda_saved_matches")||"[]")}catch(a){return[]}}showSavedMatches(){const a=this.getSavedMatches();if(0===a.length)return void this.showModal({title:"📂 Matches Guardados",content:'\n          <div class="empty-saved-matches">\n            <i class="fas fa-bookmark-o" style="font-size: 64px; color: var(--text-secondary); margin-bottom: 16px;"></i>\n            <h3>No tienes matches guardados</h3>\n            <p>Guarda matches interesantes para revisarlos más tarde</p>\n            <button class="btn btn-primary" onclick="advancedGroupsSystem.hideModal(); advancedGroupsSystem.switchTab(\'matching\');">\n              <i class="fas fa-search"></i> Explorar Matches\n            </button>\n          </div>\n        ',buttons:[{text:"Cerrar",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal()"}]});const e=a.map(a=>`\n      <div class="saved-match-item" data-match-id="${a.id}">\n        <div class="saved-match-header">\n          <div class="match-avatar-small">\n            ${"group"===a.type?a.icon:"tanda"===a.type?"🔄":"👤"}\n          </div>\n          <div class="saved-match-info">\n            <h4>${a.name}</h4>\n            <p>${a.subtitle||a.description||""}</p>\n            <small>Guardado: ${new Date(a.savedAt).toLocaleDateString("es-HN")}</small>\n          </div>\n          <div class="saved-match-compatibility">\n            ${a.compatibility}%\n          </div>\n        </div>\n        <div class="saved-match-actions">\n          <button class="btn btn-primary btn-sm" onclick="advancedGroupsSystem.connectWithMatch('${a.id}', '${a.type}')">\n            <i class="fas fa-handshake"></i> Conectar\n          </button>\n          <button class="btn btn-secondary btn-sm" onclick="advancedGroupsSystem.viewMatchDetails('${a.id}', '${a.type}')">\n            <i class="fas fa-eye"></i> Ver\n          </button>\n          <button class="btn btn-danger btn-sm" onclick="advancedGroupsSystem.removeSavedMatch('${a.id}')">\n            <i class="fas fa-trash"></i>\n          </button>\n        </div>\n      </div>\n    `).join("");this.showModal({title:`📂 Matches Guardados (${a.length})`,size:"large",content:`\n        <div class="saved-matches-container">\n          ${e}\n        </div>\n      `,buttons:[{text:"Cerrar",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal()"},{text:"🗑️ Limpiar Todo",class:"btn-danger",onclick:"advancedGroupsSystem.clearAllSavedMatches()"}]})}removeSavedMatch(a){try{let e=this.getSavedMatches();const n=e.length;if(e=e.filter(e=>e.id!==a),e.length<n){localStorage.setItem("latanda_saved_matches",JSON.stringify(e)),this.showNotification("🗑️ Match removido de guardados","info");const n=document.querySelector(`[data-match-id="${a}"]`);n&&n.remove(),this.updateSavedMatchesCount(e.length),0===e.length&&(this.hideModal(),setTimeout(()=>this.showSavedMatches(),300))}}catch(a){this.showNotification("❌ Error al remover match","error")}}clearAllSavedMatches(){this.showModal({title:"⚠️ Confirmar Acción",content:'\n        <div class="confirmation-modal">\n          <div class="warning-icon">⚠️</div>\n          <h3>¿Eliminar todos los matches guardados?</h3>\n          <p>Esta acción no se puede deshacer. Se eliminarán todos los matches que has guardado.</p>\n        </div>\n      ',buttons:[{text:"Cancelar",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal(); setTimeout(() => advancedGroupsSystem.showSavedMatches(), 300);"},{text:"🗑️ Eliminar Todo",class:"btn-danger",onclick:"advancedGroupsSystem.confirmClearAllSavedMatches()"}]})}confirmClearAllSavedMatches(){try{localStorage.removeItem("latanda_saved_matches"),this.updateSavedMatchesCount(0),this.hideModal(),this.showNotification("🗑️ Todos los matches guardados han sido eliminados","info")}catch(a){this.showNotification("❌ Error al limpiar matches guardados","error")}}showSectionHelp(a){const e=this.getHelpContent(a);this.showModal({title:`❓ Ayuda - ${e.title}`,size:"large",content:`\n        <div class="help-modal">\n          <div class="help-section">\n            <h3>🎯 ¿Qué puedes hacer aquí?</h3>\n            <div class="help-features">\n              ${e.features.map(a=>`\n                <div class="help-feature">\n                <div class="help-icon">${a.icon}</div>\n                <div class="help-text">\n                <strong>${a.title}</strong>\n                <p>${a.description}</p>\n                </div>\n                </div>\n              `).join("")}\n            </div>\n          </div>\n          <div class="help-section">\n            <h3>🚀 Primeros Pasos</h3>\n            <div class="help-steps">\n              ${e.steps.map((a,e)=>`\n                <div class="help-step">\n                <div class="step-number">${e+1}</div>\n                <div class="step-content">\n                <strong>${a.title}</strong>\n                <p>${a.description}</p>\n                </div>\n                </div>\n              `).join("")}\n            </div>\n          </div>\n          ${e.tips?`\n          <div class="help-section">\n            <h3>💡 Consejos Útiles</h3>\n            <div class="help-tips">\n              ${e.tips.map(a=>`\n                <div class="help-tip">\n                <i class="fas fa-lightbulb"></i>\n                <span>${a}</span>\n                </div>\n              `).join("")}\n            </div>\n          </div>\n          `:""}\n        </div>\n      `,buttons:[{text:"Entendido",class:"btn-primary",onclick:"advancedGroupsSystem.hideModal()"},{text:"📚 Ver Más Ayuda",class:"btn-secondary",onclick:"advancedGroupsSystem.showComprehensiveHelp()"}]})}getHelpContent(a){const e={dashboard:{title:"Dashboard Principal",features:[{icon:"📊",title:"Resumen Financiero",description:"Ve tus estadísticas de ahorro, grupos activos y rendimiento general"},{icon:"🔔",title:"Notificaciones",description:"Mantente al día con pagos pendientes y actividades importantes"},{icon:"⚡",title:"Acciones Rápidas",description:"Accede rápidamente a las funciones más utilizadas"}],steps:[{title:"Revisa tu resumen",description:"Observa tus métricas principales en las tarjetas superiores"},{title:"Verifica notificaciones",description:"Haz clic en el ícono de campana para ver alertas importantes"},{title:"Explora las secciones",description:"Usa las pestañas superiores para navegar entre funciones"}],tips:["Las estadísticas se actualizan en tiempo real","Puedes personalizar las notificaciones en tu perfil","Los gráficos muestran tu progreso histórico"]},groups:{title:"Gestión de Grupos",features:[{icon:"👥",title:"Mis Grupos",description:"Administra todos los grupos donde participas"},{icon:"⚙️",title:"Configuración",description:"Modifica la configuración de los grupos que coordinas"},{icon:"💰",title:"Finanzas",description:"Rastrea pagos, contribuciones y balances del grupo"}],steps:[{title:"Explora tus grupos",description:"Ve la lista de grupos donde participas y su estado"},{title:"Revisa los detalles",description:"Haz clic en cualquier grupo para ver información detallada"},{title:"Gestiona pagos",description:"Registra pagos y mantén actualizado el estado financiero"}],tips:["Los coordinadores tienen opciones adicionales de gestión","Puedes filtrar grupos por estado y tipo","Las notificaciones te alertan sobre pagos pendientes"]},create:{title:"Crear Nuevo Grupo",features:[{icon:"📝",title:"Formulario Guiado",description:"Completa la información básica del grupo paso a paso"},{icon:"🔧",title:"Configuración Avanzada",description:"Define reglas, términos y condiciones específicas"},{icon:"👥",title:"Invitar Miembros",description:"Añade participantes iniciales al grupo"}],steps:[{title:"Información básica",description:"Completa nombre, descripción y tipo de grupo"},{title:"Configuración financiera",description:"Define montos, frecuencia y reglas de pago"},{title:"Términos y condiciones",description:"Establece las reglas específicas del grupo"},{title:"Revisar y crear",description:"Confirma toda la información antes de crear"}],tips:["Puedes guardar borradores del formulario","Todos los campos marcados con * son obligatorios","Puedes editar la configuración después de crear el grupo"]},tandas:{title:"Sistema de Tandas",features:[{icon:"🔄",title:"Tandas Activas",description:"Participa en tandas rotativas con tu grupo"},{icon:"📅",title:"Cronograma",description:"Ve cuándo te toca recibir y cuándo debes pagar"},{icon:"🏆",title:"Historial",description:"Revisa tandas completadas y tu historial de participación"}],steps:[{title:"Únete a una tanda",description:"Participa en tandas disponibles de tus grupos"},{title:"Realiza pagos",description:"Cumple con tus obligaciones según el cronograma"},{title:"Recibe tu turno",description:"Cuando te toque, recibirás el fondo acumulado"}],tips:["Las tandas requieren compromiso de todos los participantes","Tu turno se asigna al inicio de la tanda","Los pagos puntuales mejoran tu score de confianza"]},matching:{title:"Sistema de Matching",features:[{icon:"🔍",title:"Búsqueda Inteligente",description:"Encuentra grupos y personas compatibles con tu perfil"},{icon:"📊",title:"Score de Compatibilidad",description:"Ve qué tan compatible eres con cada match"},{icon:"💾",title:"Guardar Matches",description:"Guarda matches interesantes para revisar después"}],steps:[{title:"Explora sugerencias",description:"Revisa los matches sugeridos basados en tu perfil"},{title:"Usa filtros",description:"Filtra por ubicación, tipo y monto para refinar búsqueda"},{title:"Conecta",description:"Envía solicitudes a grupos o personas de tu interés"}],tips:["Tu score de compatibilidad se basa en múltiples factores","Puedes guardar matches para revisar más tarde","Los filtros te ayudan a encontrar exactamente lo que buscas"]},analytics:{title:"Analíticas y Reportes",features:[{icon:"📈",title:"Métricas de Rendimiento",description:"Analiza tu progreso financiero y tendencias"},{icon:"🎯",title:"Cumplimiento de Metas",description:"Rastrea qué tan bien cumples tus objetivos"},{icon:"📊",title:"Reportes Detallados",description:"Genera reportes personalizados de tu actividad"}],steps:[{title:"Revisa métricas",description:"Observa tus indicadores clave de rendimiento"},{title:"Analiza tendencias",description:"Identifica patrones en tu comportamiento financiero"},{title:"Genera reportes",description:"Crea reportes personalizados para análisis profundo"}],tips:["Los datos se actualizan diariamente","Puedes exportar reportes para análisis externo","Las tendencias te ayudan a tomar mejores decisiones"]}};return e[a]||e.dashboard}showComprehensiveHelp(){this.showModal({title:"📚 Centro de Ayuda Completo",size:"large",content:`\n        <div class="comprehensive-help">\n          <div class="help-nav">\n            <button class="help-nav-btn active" onclick="advancedGroupsSystem.showHelpCategory('getting-started')">🚀 Primeros Pasos</button>\n            <button class="help-nav-btn" onclick="advancedGroupsSystem.showHelpCategory('features')">⚡ Funcionalidades</button>\n            <button class="help-nav-btn" onclick="advancedGroupsSystem.showHelpCategory('faq')">❓ FAQ</button>\n            <button class="help-nav-btn" onclick="advancedGroupsSystem.showHelpCategory('troubleshooting')">🔧 Solución de Problemas</button>\n          </div>\n          <div id="helpCategoryContent" class="help-category-content">\n            ${this.getGettingStartedContent()}\n          </div>\n        </div>\n      `,buttons:[{text:"Cerrar",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal()"},{text:"📞 Contactar Soporte",class:"btn-primary",onclick:"advancedGroupsSystem.contactSupport()"}]})}showHelpCategory(a){document.querySelectorAll(".help-nav-btn").forEach(a=>a.classList.remove("active")),event.target.classList.add("active");const e=document.getElementById("helpCategoryContent");if(!e)return;let n="";switch(a){case"getting-started":default:n=this.getGettingStartedContent();break;case"features":n=this.getFeaturesContent();break;case"faq":n=this.getFAQContent();break;case"troubleshooting":n=this.getTroubleshootingContent()}e.innerHTML=n}getGettingStartedContent(){return'\n      <div class="help-content">\n        <h3>🚀 Bienvenido a La Tanda Web3</h3>\n        <p>Esta guía te ayudará a comenzar con tu sistema de ahorro colaborativo.</p>\n        <div class="help-steps-guide">\n          <div class="guide-step">\n            <div class="step-icon">1️⃣</div>\n            <h4>Completa tu Perfil</h4>\n            <p>Agrega tu información personal y preferencias para recibir mejores recomendaciones.</p>\n          </div>\n          <div class="guide-step">\n            <div class="step-icon">2️⃣</div>\n            <h4>Explora el Dashboard</h4>\n            <p>Familiarízate con las métricas principales y opciones de navegación.</p>\n          </div>\n          <div class="guide-step">\n            <div class="step-icon">3️⃣</div>\n            <h4>Crea tu Primer Grupo</h4>\n            <p>Inicia con un grupo pequeño para probar las funcionalidades básicas.</p>\n          </div>\n          <div class="guide-step">\n            <div class="step-icon">4️⃣</div>\n            <h4>Invita Participantes</h4>\n            <p>Añade amigos o familiares a tu grupo para comenzar a ahorrar juntos.</p>\n          </div>\n        </div>\n      </div>\n    '}getFeaturesContent(){return'\n      <div class="help-content">\n        <h3>⚡ Funcionalidades Principales</h3>\n        <div class="features-grid">\n          <div class="feature-card">\n            <h4>👥 Gestión de Grupos</h4>\n            <ul>\n              <li>Crear y administrar grupos cooperativos</li>\n              <li>Invitar y gestionar miembros</li>\n              <li>Configurar reglas y términos</li>\n              <li>Seguimiento financiero automático</li>\n            </ul>\n          </div>\n          <div class="feature-card">\n            <h4>🔄 Sistema de Tandas</h4>\n            <ul>\n              <li>Participación en tandas rotativas</li>\n              <li>Cronogramas automáticos de pagos</li>\n              <li>Notificaciones de vencimientos</li>\n              <li>Historial completo de participación</li>\n            </ul>\n          </div>\n          <div class="feature-card">\n            <h4>🔍 Matching Inteligente</h4>\n            <ul>\n              <li>Sugerencias basadas en compatibilidad</li>\n              <li>Filtros avanzados de búsqueda</li>\n              <li>Sistema de puntuación de confianza</li>\n              <li>Guardado de matches favoritos</li>\n            </ul>\n          </div>\n          <div class="feature-card">\n            <h4>📊 Analíticas Avanzadas</h4>\n            <ul>\n              <li>Métricas de rendimiento personales</li>\n              <li>Reportes detallados de actividad</li>\n              <li>Tendencias y proyecciones</li>\n              <li>Exportación de datos</li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    '}getFAQContent(){return'\n      <div class="help-content">\n        <h3>❓ Preguntas Frecuentes</h3>\n        <div class="faq-list">\n          <div class="faq-item">\n            <h4>¿Qué es una tanda?</h4>\n            <p>Una tanda es un sistema de ahorro grupal donde cada miembro contribuye una cantidad fija periódicamente, y por turnos cada uno recibe el fondo total acumulado.</p>\n          </div>\n          <div class="faq-item">\n            <h4>¿Cómo se determina el orden de la tanda?</h4>\n            <p>El orden se puede establecer por sorteo, por acuerdo mutuo, o por criterios específicos definidos al crear el grupo.</p>\n          </div>\n          <div class="faq-item">\n            <h4>¿Qué pasa si alguien no paga?</h4>\n            <p>El sistema tiene mecanismos de seguimiento y recordatorios. Los coordinadores pueden tomar acciones como penalizaciones o exclusión del grupo.</p>\n          </div>\n          <div class="faq-item">\n            <h4>¿Puedo participar en múltiples grupos?</h4>\n            <p>Sí, puedes participar en tantos grupos como desees, siempre que puedas cumplir con los compromisos financieros.</p>\n          </div>\n          <div class="faq-item">\n            <h4>¿Es segura mi información financiera?</h4>\n            <p>Sí, utilizamos encriptación avanzada y seguimos las mejores prácticas de seguridad para proteger toda tu información.</p>\n          </div>\n        </div>\n      </div>\n    '}getTroubleshootingContent(){return'\n      <div class="help-content">\n        <h3>🔧 Solución de Problemas Comunes</h3>\n        <div class="troubleshooting-list">\n          <div class="trouble-item">\n            <h4>🚫 No puedo ver mis grupos</h4>\n            <div class="solutions">\n              <p><strong>Soluciones:</strong></p>\n              <ul>\n                <li>Refresca la página (Ctrl+F5)</li>\n                <li>Verifica tu conexión a internet</li>\n                <li>Cierra sesión y vuelve a entrar</li>\n                <li>Limpia la caché del navegador</li>\n              </ul>\n            </div>\n          </div>\n          <div class="trouble-item">\n            <h4>💳 Problemas con pagos</h4>\n            <div class="solutions">\n              <p><strong>Soluciones:</strong></p>\n              <ul>\n                <li>Verifica que el monto sea correcto</li>\n                <li>Confirma que tengas fondos suficientes</li>\n                <li>Revisa que la fecha no haya vencido</li>\n                <li>Contacta al coordinador del grupo</li>\n              </ul>\n            </div>\n          </div>\n          <div class="trouble-item">\n            <h4>🔔 No recibo notificaciones</h4>\n            <div class="solutions">\n              <p><strong>Soluciones:</strong></p>\n              <ul>\n                <li>Revisa la configuración de notificaciones</li>\n                <li>Verifica que estén habilitadas en el navegador</li>\n                <li>Confirma tu dirección de email</li>\n                <li>Revisa la carpeta de spam</li>\n              </ul>\n            </div>\n          </div>\n          <div class="trouble-item">\n            <h4>🔍 No encuentro matches</h4>\n            <div class="solutions">\n              <p><strong>Soluciones:</strong></p>\n              <ul>\n                <li>Amplía los criterios de búsqueda</li>\n                <li>Completa tu perfil con más información</li>\n                <li>Ajusta los filtros de ubicación</li>\n                <li>Verifica que tu perfil esté público</li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n    '}contactSupport(){this.showModal({title:"📞 Contactar Soporte",content:'\n        <div class="contact-support">\n          <div class="support-options">\n            <h3>¿Cómo podemos ayudarte?</h3>\n            <div class="support-channels">\n              <div class="support-channel">\n                <div class="channel-icon">📧</div>\n                <h4>Email</h4>\n                <p>soporte@latanda.com</p>\n                <p><small>Respuesta en 24-48 horas</small></p>\n              </div>\n              <div class="support-channel">\n                <div class="channel-icon">💬</div>\n                <h4>WhatsApp</h4>\n                <p>+504 9999-9999</p>\n                <p><small>Lun-Vie 8:00-18:00</small></p>\n              </div>\n              <div class="support-channel">\n                <div class="channel-icon">🎯</div>\n                <h4>Chat en Vivo</h4>\n                <p>Disponible en el sitio web</p>\n                <p><small>Lun-Vie 9:00-17:00</small></p>\n              </div>\n            </div>\n          </div>\n          <div class="quick-report">\n            <h4>🐛 Reportar un Problema Rápido</h4>\n            <form id="quickReportForm">\n              <div class="form-group">\n                <label>Tipo de problema:</label>\n                <select id="problemType" required>\n                <option value="">Selecciona el tipo</option>\n                <option value="bug">Error en el sistema</option>\n                <option value="payment">Problema de pago</option>\n                <option value="account">Problema de cuenta</option>\n                <option value="feature">Solicitud de función</option>\n                <option value="other">Otro</option>\n                </select>\n              </div>\n              <div class="form-group">\n                <label>Descripción:</label>\n                <textarea id="problemDescription" rows="3" placeholder="Describe el problema en detalle..." required></textarea>\n              </div>\n              <button type="button" class="btn btn-primary" onclick="advancedGroupsSystem.submitQuickReport()">\n                📤 Enviar Reporte\n              </button>\n            </form>\n          </div>\n        </div>\n      ',buttons:[{text:"Cerrar",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal()"}]})}submitQuickReport(){const a=document.getElementById("quickReportForm"),e=(new FormData(a),document.getElementById("problemType").value),n=document.getElementById("problemDescription").value;e&&n.trim()?(this.hideModal(),this.showNotification("📤 Reporte enviado exitosamente. Te contactaremos pronto.","success")):this.showNotification("⚠️ Por favor completa todos los campos","warning")}showEnhancedError(a,e="",n=""){let t="Ha ocurrido un error inesperado.",s="Por favor, intenta de nuevo.";"string"==typeof a&&(a.toLowerCase().includes("network")||a.toLowerCase().includes("fetch")?(t="Error de conexión a internet.",s="Verifica tu conexión y reintenta."):a.toLowerCase().includes("permission")||a.toLowerCase().includes("unauthorized")?(t="No tienes permisos para esta acción.",s="Contacta al coordinador del grupo."):a.toLowerCase().includes("not found")&&(t="El elemento solicitado no existe.",s="Refresca la página o revisa tu selección.")),n&&(s=n),this.showModal({title:"⚠️ Error",content:`\n        <div class="enhanced-error-modal">\n          <div class="error-icon">❌</div>\n          <h3>Oops! Algo no salió bien</h3>\n          <div class="error-details">\n            <p><strong>¿Qué pasó?</strong></p>\n            <p>${t}</p>\n            ${e?`\n            <p><strong>¿Dónde?</strong></p>\n            <p>En la sección: ${e}</p>\n            `:""}\n            <p><strong>¿Qué puedes hacer?</strong></p>\n            <p>${s}</p>\n          </div>\n          <div class="error-actions">\n            <p><small>Si el problema persiste, puedes:</small></p>\n            <ul>\n              <li>Refrescar la página</li>\n              <li>Revisar tu conexión a internet</li>\n              <li>Contactar soporte técnico</li>\n            </ul>\n          </div>\n        </div>\n      `,buttons:[{text:"🔄 Reintentar",class:"btn-primary",onclick:"advancedGroupsSystem.hideModal(); window.location.reload();"},{text:"📞 Contactar Soporte",class:"btn-secondary",onclick:"advancedGroupsSystem.hideModal(); advancedGroupsSystem.contactSupport();"},{text:"Cerrar",class:"btn-outline",onclick:"advancedGroupsSystem.hideModal()"}]})}showEmptyState(a,e){const n={groups:{icon:"👥",title:"No tienes grupos creados",message:"Los grupos cooperativos te permiten ahorrar en conjunto con otras personas.",actions:[{text:"Crear mi primer grupo",class:"btn-primary",onclick:"switchTab('create')"},{text:"Buscar grupos existentes",class:"btn-secondary",onclick:"switchTab('matching')"}]},tandas:{icon:"🔄",title:"No participas en tandas",message:"Las tandas son ciclos de ahorro donde cada participante recibe el fondo total en su turno.",actions:[{text:"Únete a un grupo",class:"btn-primary",onclick:"switchTab('matching')"},{text:"Crear nuevo grupo",class:"btn-secondary",onclick:"switchTab('create')"}]},matching:{icon:"🔍",title:"No hay matches disponibles",message:"Completa tu perfil para recibir mejores sugerencias de grupos compatibles.",actions:[{text:"Completar perfil",class:"btn-primary",onclick:"advancedGroupsSystem.showProfileSettings()"},{text:"Crear tu grupo",class:"btn-secondary",onclick:"switchTab('create')"}]},analytics:{icon:"📊",title:"Sin datos para analizar",message:"Participa en grupos y tandas para ver estadísticas detalladas de tu actividad.",actions:[{text:"Ver mis grupos",class:"btn-primary",onclick:"switchTab('groups')"},{text:"Buscar grupos",class:"btn-secondary",onclick:"switchTab('matching')"}]}},t=n[a]||n.groups,s=document.getElementById(e);if(!s)return;const i=t.actions.map(a=>`<button class="btn ${a.class}" onclick="${a.onclick}">${a.text}</button>`).join("");s.innerHTML=`\n      <div class="empty-state-container">\n        <div class="empty-state-content">\n          <div class="empty-state-icon">${t.icon}</div>\n          <h3 class="empty-state-title">${t.title}</h3>\n          <p class="empty-state-message">${t.message}</p>\n          <div class="empty-state-actions">\n            ${i}\n          </div>\n        </div>\n        <div class="empty-state-help">\n          <p><small>¿Necesitas ayuda?\n            <a href="#" onclick="advancedGroupsSystem.showSectionHelp('${a}')">Ver guía de ${a}</a>\n          </small></p>\n        </div>\n      </div>\n    `}showLoadingState(a,e="Cargando...",n=!1){const t=document.getElementById(a);t&&(t.innerHTML=`\n      <div class="loading-state-container">\n        <div class="loading-state-content">\n          <div class="loading-spinner">\n            <div class="spinner-ring"></div>\n            <div class="spinner-ring"></div>\n            <div class="spinner-ring"></div>\n          </div>\n          <h3 class="loading-message">${e}</h3>\n          ${n?'\n          <div class="loading-progress">\n            <div class="progress-bar-container">\n              <div class="progress-bar-fill" id="loadingProgress"></div>\n            </div>\n            <p class="progress-text" id="progressText">0%</p>\n          </div>\n          ':""}\n        </div>\n      </div>\n    `,n&&this.animateProgress("loadingProgress","progressText"))}animateProgress(a,e){const n=document.getElementById(a),t=document.getElementById(e);if(!n||!t)return;let s=0;const i=setInterval(()=>{s+=15*Math.random(),s>=100&&(s=100,clearInterval(i)),n.style.width=`${s}%`,t.textContent=`${Math.round(s)}%`},200)}showSuccessFeedback(a,e,n=[]){this.showConfetti(),this.showModal({title:`🎉 ${a}`,content:`\n        <div class="success-feedback-modal">\n          <div class="success-animation">\n            <div class="success-checkmark">✅</div>\n          </div>\n          <h3>${a}</h3>\n          <p>${e}</p>\n          ${n.length>0?`\n          <div class="next-actions">\n            <h4>¿Qué quieres hacer ahora?</h4>\n            <div class="next-actions-grid">\n              ${n.map(a=>`\n                <button class="btn ${a.class||"btn-primary"}" onclick="${a.onclick}">\n                ${a.icon?`<i class="${a.icon}"></i>`:""} ${a.text}\n                </button>\n              `).join("")}\n            </div>\n          </div>\n          `:""}\n        </div>\n      `,buttons:[{text:"Perfecto",class:"btn-primary",onclick:"advancedGroupsSystem.hideModal()"}]})}showConfetti(){const a=document.createElement("div");a.className="confetti-container",a.style.cssText="\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      z-index: 9999;\n    ";for(let e=0;e<50;e++){const e=document.createElement("div");e.className="confetti-piece",e.style.cssText=`\n        position: absolute;\n        width: 10px;\n        height: 10px;\n        background: ${["#00ffff","#7fffd8","#40e0d0","#00ced1"][Math.floor(4*Math.random())]};\n        top: -10px;\n        left: ${100*Math.random()}%;\n        animation: confetti-fall ${2+3*Math.random()}s linear forwards;\n        transform: rotate(${360*Math.random()}deg);\n      `,a.appendChild(e)}document.body.appendChild(a),setTimeout(()=>{a.parentNode&&a.parentNode.removeChild(a)},5e3)}setupProgressiveDisclosure(a){const e=document.getElementById(a);e&&e.querySelectorAll('input[type="number"], select, textarea').forEach(a=>{if(!a.nextElementSibling||!a.nextElementSibling.classList.contains("field-help")){const e=document.createElement("span");e.className="field-help-icon",e.innerHTML="❓",e.title="Haz clic para obtener ayuda",e.onclick=()=>this.showFieldHelp(a),a.parentNode.insertBefore(e,a.nextSibling)}})}showFieldHelp(a){const e={groupName:"Elige un nombre descriptivo que identifique claramente el propósito del grupo.",contribution:"Monto que cada miembro contribuirá en cada ciclo. Considera la capacidad económica de los participantes.",maxParticipants:"Número máximo de miembros. Grupos pequeños (5-10) son más fáciles de gestionar.",cycleDuration:"Frecuencia de los pagos. Semanal es común para montos pequeños, mensual para montos mayores.",location:"Ubicación ayuda a encontrar miembros cercanos y facilita reuniones presenciales.",description:"Explica el propósito del grupo, reglas básicas y expectativas para los miembros."},n=e[a.id]||e[a.name]||"Completa este campo según las instrucciones.";this.showNotification(n,"info",5e3)}validateUserEligibility(a,e){const n=this.getMatchRequirements(a);if(e.trustScore<n.minTrustScore)return!1;if(e.experience<n.minExperience)return!1;if("tanda"===a.type&&a.amount&&e.monthlyIncome){const n=.3*e.monthlyIncome;if(a.amount>n)return!1}return!0}trackUserAction(a,e={}){const n={action:a,timestamp:(new Date).toISOString(),user:this.currentUser?.id||"anonymous",tab:this.currentTab,...e},t=JSON.parse(localStorage.getItem("latanda_user_actions")||"[]");t.push(n),t.length>100&&t.splice(0,t.length-100),localStorage.setItem("latanda_user_actions",JSON.stringify(t)),this.apiProxy&&"function"==typeof this.apiProxy.trackEvent&&this.apiProxy.trackEvent(n)}setupMatchingGuidance(){setTimeout(()=>{[{selector:".compatibility-badge",message:"El porcentaje de compatibilidad se basa en ubicación, experiencia, objetivos financieros y historial."},{selector:".match-reasons",message:"Estas son las razones por las que este match es recomendado para tu perfil."},{selector:".matching-filters",message:"Usa estos filtros para encontrar matches más específicos según tus preferencias."}].forEach(({selector:a,message:e})=>{document.querySelectorAll(a).forEach(a=>{a.setAttribute("title",e),a.style.cursor="help"})})},1e3)}setupMatchingUpdates(){this.matchingUpdateInterval=setInterval(()=>{"matching"===this.currentTab&&this.updateMatchAvailability()},3e4)}updateMatchAvailability(){document.querySelectorAll(".match-card").forEach(a=>{const e=a.dataset.matchId,n=this.getMatchingSuggestions().find(a=>a.id===e);if(n){const e=a.querySelector(".stat:has(.fa-users) span:last-child");e&&e.textContent!==`${n.members} miembros`&&(e.textContent=`${n.members} miembros`,this.highlightUpdate(a,"Miembros actualizados"));const t=a.querySelector(".compatibility-percent");t&&t.textContent!==`${n.compatibility}%`&&(t.textContent=`${n.compatibility}%`,this.highlightUpdate(a,"Compatibilidad actualizada"))}})}highlightUpdate(a,e){a.style.border="2px solid var(--tanda-cyan)",a.style.boxShadow="0 0 20px rgba(0, 255, 255, 0.3)",this.showNotification(`✨ ${e}`,"info"),setTimeout(()=>{a.style.border="",a.style.boxShadow=""},3e3)}clearMatchingFilters(){const a=document.getElementById("matchType"),e=document.getElementById("locationFilter"),n=document.getElementById("amountFilter");a&&(a.value="all"),e&&(e.value="bay-islands"),n&&(n.value="all"),this.trackUserAction("clear_matching_filters"),this.updateMatchingFilters(),this.showNotification("🔄 Filtros limpiados. Mostrando todos los matches disponibles.","success")}handleError(a,e="Sistema",n=!0){const t={message:a.message||"Error desconocido",stack:a.stack,context:e,timestamp:(new Date).toISOString(),userAgent:navigator.userAgent,url:window.location.href};try{const a=JSON.parse(localStorage.getItem("latanda_errors")||"[]");a.push(t),a.length>50&&a.splice(0,a.length-50),localStorage.setItem("latanda_errors",JSON.stringify(a))}catch(a){}if(n){const n=this.getUserFriendlyErrorMessage(a,e);this.showNotification(n,"error",8e3)}return this.trackUserAction("error_occurred",{error:a.message,context:e}),t}getUserFriendlyErrorMessage(a,e){const n={"Network Error":"🌐 Error de conexión. Verifica tu internet e intenta de nuevo.","Failed to fetch":"🌐 No se pudo conectar al servidor. Intenta más tarde.",TypeError:"⚠️ Error interno del sistema. Recarga la página si persiste.",SyntaxError:"⚠️ Error de datos. Recarga la página si persiste.",ReferenceError:"⚠️ Funcionalidad no disponible. Intenta más tarde.",matching:"🎯 Error en el sistema de matching. Intenta actualizar los matches.",groups:"👥 Error en grupos. Verifica tu conexión e intenta de nuevo.",tandas:"🔄 Error en tandas. Intenta recargar la sección.",analytics:"📊 Error en analíticas. Los datos pueden estar temporalmente no disponibles."};for(const[t,s]of Object.entries(n))if(a.message?.includes(t)||e.toLowerCase().includes(t))return s;return"⚠️ Ocurrió un error inesperado. Si persiste, contacta soporte."}safeExecute(a,e="Función",...n){try{return a.apply(this,n)}catch(a){return this.handleError(a,e),null}}async safeExecuteAsync(a,e="Función asíncrona",...n){try{return await a.apply(this,n)}catch(a){return this.handleError(a,e),null}}recoverFromError(a,e=null){switch(a.toLowerCase()){case"matching":this.showNotification("🔄 Reintentando cargar sistema de matching...","info"),setTimeout(()=>{this.safeExecuteAsync(this.loadMatchingContent.bind(this),"Recuperación de matching")},2e3);break;case"groups":this.showNotification("🔄 Reintentando cargar grupos...","info"),setTimeout(()=>{this.safeExecuteAsync(this.loadGroupsContent.bind(this),"Recuperación de grupos")},2e3);break;case"tandas":this.showNotification("🔄 Reintentando cargar tandas...","info"),setTimeout(()=>{this.safeExecuteAsync(this.loadTandasContent.bind(this),"Recuperación de tandas")},2e3);break;default:e&&"function"==typeof e&&setTimeout(()=>{this.safeExecute(e,`Acción de recuperación para ${a}`)},1e3)}}setupGlobalErrorHandling(){window.addEventListener("unhandledrejection",a=>{this.handleError(a.reason,"Promise rechazada",!1),a.preventDefault()}),window.addEventListener("error",a=>{this.handleError(a.error||new Error(a.message),"Error global",!1)})}destroy(){this.periodicUpdateInterval&&clearInterval(this.periodicUpdateInterval),this.notificationInterval&&clearInterval(this.notificationInterval),this.matchingUpdateInterval&&clearInterval(this.matchingUpdateInterval)}}function switchTab(a){window.advancedGroupsSystem&&window.advancedGroupsSystem.switchTab(a)}function showNotifications(){window.advancedGroupsSystem&&window.advancedGroupsSystem.showNotifications()}function openKYC(){window.advancedGroupsSystem&&"function"==typeof window.advancedGroupsSystem.openKYC?window.advancedGroupsSystem.openKYC():setTimeout(()=>{window.advancedGroupsSystem&&"function"==typeof window.advancedGroupsSystem.openKYC?window.advancedGroupsSystem.openKYC():alert("Sistema aún no está listo. Por favor, espera unos segundos y prueba de nuevo.")},1e3)}function showAudit(){window.advancedGroupsSystem&&"function"==typeof window.advancedGroupsSystem.showAudit?window.advancedGroupsSystem.showAudit():setTimeout(()=>{window.advancedGroupsSystem&&"function"==typeof window.advancedGroupsSystem.showAudit?window.advancedGroupsSystem.showAudit():alert("Sistema aún no está listo. Por favor, espera unos segundos y prueba de nuevo.")},1e3)}function toggleCollapsible(a){const e=a.nextElementSibling,n=a.querySelector(".collapsible-icon");a.classList.toggle("active"),e.classList.toggle("expanded"),e.classList.contains("expanded")?(e.style.maxHeight=e.scrollHeight+"px",n.style.transform="rotate(180deg)"):(e.style.maxHeight="0px",n.style.transform="rotate(0deg)")}function ensureSystemReady(a){window.advancedGroupsSystem&&"function"==typeof window.advancedGroupsSystem.showNotification?a():setTimeout(()=>ensureSystemReady(a),100)}function refreshGroupData(){localStorage.removeItem("latanda_groups_data"),window.location.reload()}window.advancedGroupsSystem=null,document.addEventListener("DOMContentLoaded",function(){try{window.advancedGroupsSystem=new AdvancedGroupsSystemV3,"undefined"!=typeof window&&(window.advancedGroupsSystem=window.advancedGroupsSystem)}catch(a){window.advancedGroupsSystem={switchTab:a=>{if(window.switchTabInProgress)return;window.switchTabInProgress=!0,document.querySelectorAll(".content-section").forEach(a=>a.classList.remove("active"));const e=document.getElementById(a);if(e)if(e.classList.add("active"),"groups"===a){const a=e.querySelector(".groups-grid");a&&!a.hasChildNodes()&&(a.innerHTML='<div class="empty-state"><h3>No tienes grupos creados</h3><p>Crea tu primer grupo para comenzar</p></div>')}else if("tandas"===a){const a=e.querySelector(".tandas-list");a&&!a.hasChildNodes()&&(a.innerHTML='<div class="empty-state"><h3>No tienes tandas activas</h3><p>Únete a un grupo para participar en tandas</p></div>')}document.querySelectorAll(".nav-tab").forEach(a=>a.classList.remove("active"));const n=document.querySelector(`[data-tab="${a}"]`);n&&n.classList.add("active"),setTimeout(()=>{window.switchTabInProgress=!1},500)},showNotification:()=>{},makePayment:()=>{},showNotifications:()=>{}}}}),localStorage.getItem("coordinator_data_refreshed")||localStorage.setItem("coordinator_data_refreshed","true");