{"id":2502,"date":"2026-05-20T23:52:41","date_gmt":"2026-05-20T23:52:41","guid":{"rendered":"https:\/\/maanyuba.com\/?page_id=2502"},"modified":"2026-05-21T18:37:34","modified_gmt":"2026-05-21T18:37:34","slug":"cfe-demo","status":"publish","type":"page","link":"https:\/\/maanyuba.com\/en\/cfe-demo\/","title":{"rendered":"CFE Demo"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n CFE \u00b7 Pago de Recibo<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * { -webkit-font-smoothing: antialiased; margin: 0; }\r\n #app, #app * { margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent; }\r\n #app {\r\n --accent: #008E5A;\r\n --accent-dark: #03794E;\r\n --bg: #f5f7f5;\r\n --white: #fff;\r\n --text: #0d1f10;\r\n --mid: #5a6e5d;\r\n --light: #9bac9e;\r\n --shadow: 0 4px 20px rgba(0,0,0,.07);\r\n --shadow-md: 0 8px 28px rgba(0,0,0,.1);\r\n --r-xl: 22px;\r\n --r-lg: 16px;\r\n --r-md: 12px;\r\n font-family: 'Manrope', sans-serif;\r\n background: #111;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 100vh;\r\n }\r\n #app .phone {\r\n width: 100vw;\r\n height: 100vh;\r\n background: var(--bg);\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 LOADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n #s-loader {\r\n position: absolute;\r\n inset: 0;\r\n background: #071510;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 999;\r\n padding: 0 48px;\r\n transition: opacity .45s ease, transform .45s ease;\r\n }\r\n #s-loader.fade-out {\r\n opacity: 0;\r\n transform: scale(1.02);\r\n pointer-events: none;\r\n }\r\n .loader-logo {\r\n width: 160px;\r\n margin-bottom: 56px;\r\n opacity: 0;\r\n transform: translateY(10px);\r\n animation: logoIn .55s .1s cubic-bezier(.22,1,.36,1) forwards;\r\n }\r\n @keyframes logoIn {\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n .loader-label {\r\n font-size: 10px;\r\n font-weight: 600;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,.25);\r\n margin-bottom: 16px;\r\n opacity: 0;\r\n animation: logoIn .4s .3s forwards;\r\n }\r\n .loader-track {\r\n width: 100%;\r\n height: 3px;\r\n background: rgba(255,255,255,.07);\r\n border-radius: 100px;\r\n overflow: hidden;\r\n opacity: 0;\r\n animation: logoIn .4s .4s forwards;\r\n }\r\n .loader-bar {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(90deg, #1a9e4a, #27c360, #7eedb0);\r\n border-radius: 100px;\r\n transition: width .08s ease;\r\n box-shadow: 0 0 8px rgba(39,195,96,.6);\r\n }\r\n .loader-tagline {\r\n position: absolute;\r\n bottom: 44px;\r\n font-size: 10px;\r\n color: rgba(255,255,255,.14);\r\n font-weight: 500;\r\n letter-spacing: .5px;\r\n opacity: 0;\r\n animation: logoIn .4s .5s forwards;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SCREENS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n #app .screen {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n flex-direction: column;\r\n opacity: 0;\r\n transform: translateX(26px);\r\n pointer-events: none;\r\n transition: opacity .34s cubic-bezier(.4,0,.2,1), transform .34s cubic-bezier(.4,0,.2,1);\r\n overflow: hidden;\r\n }\r\n #app .screen.active { opacity:1; transform:translateX(0); pointer-events:all; }\r\n #app .screen.exit { opacity:0; transform:translateX(-26px); pointer-events:none; transition: opacity .22s ease, transform .22s ease; }\r\n #app .screen:not(.active) { overflow:hidden!important; }\r\n #app .scroll { flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }\r\n #app .scroll::-webkit-scrollbar { display:none; }\r\n\r\n \/* NAV *\/\r\n #app .nav { background:#fff; padding:50px 18px 14px; flex-shrink:0; border-bottom:1px solid #eef0ee; display:flex; align-items:center; position:relative; }\r\n #app .nav-title { position:absolute; left:50%; transform:translateX(-50%); font-size:17px; font-weight:800; color:var(--text); }\r\n #app .back-btn { width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.07); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s; }\r\n #app .back-btn:active { background:rgba(0,0,0,.13); }\r\n\r\n \/* BUTTONS *\/\r\n #app .btn-cta { width:100%; padding:18px; background:var(--accent); border:none; border-radius:var(--r-xl); font-family:'Manrope',sans-serif; font-size:16px; font-weight:800; color:#04180a; cursor:pointer; letter-spacing:-.2px; transition:transform .12s, opacity .12s; }\r\n #app .btn-cta:active { transform:scale(.97); opacity:.9; }\r\n #app .btn-ghost { width:100%; padding:15px; background:transparent; border:1.5px solid rgba(39,195,96,.35); border-radius:var(--r-xl); font-family:'Manrope',sans-serif; font-size:15px; font-weight:700; color:var(--accent); cursor:pointer; margin-top:10px; }\r\n #app .btn-ghost-dk { width:100%; padding:15px; background:transparent; border:1.5px solid rgba(255,255,255,.18); border-radius:var(--r-xl); font-family:'Manrope',sans-serif; font-size:15px; font-weight:700; color:#fff; cursor:pointer; margin-top:10px; }\r\n #app .pad { padding:12px 18px 40px; flex-shrink:0; }\r\n #app .sdot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }\r\n\r\n \/* HOME *\/\r\n #app #s-home { background:#fff; }\r\n #app .home-nav { background:#fff; padding:50px 18px 14px; flex-shrink:0; border-bottom:1px solid #eef0ee; display:flex; align-items:center; justify-content:space-between; }\r\n #app .home-nav-title { font-size:17px; font-weight:800; color:var(--text); }\r\n #app .home-nav-sub { font-size:11px; color:var(--light); font-weight:500; margin-top:1px; }\r\n #app .home-nav-badge { display:flex; align-items:center; gap:5px; background:#eaf7ef; border-radius:100px; padding:6px 12px; font-size:11px; font-weight:700; color:var(--accent); }\r\n\r\n \/* Banner *\/\r\n #app .banner-pendiente { margin:14px 14px 0; border-radius:var(--r-xl); background-image:url('https:\/\/maanyuba.com\/wp-content\/uploads\/2026\/05\/recibo-cfe_v2.jpg'); background-size:cover; background-position:center right; background-repeat:no-repeat; padding:20px 20px; position:relative; overflow:hidden; cursor:pointer; }\r\n #app .bp-eyebrow { font-size:10px; font-weight:700; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.8px; margin-bottom:4px; }\r\n #app .bp-title { font-size:18px; font-weight:900; color:#fff; letter-spacing:-.4px; line-height:1.2; }\r\n #app .bp-sub { font-size:12px; color:rgba(255,255,255,.7); margin-top:4px; font-weight:500; }\r\n #app .bp-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:16px; position:relative; z-index:2; }\r\n #app .bp-amount { font-size:32px; font-weight:900; color:#fff; letter-spacing:-2px; }\r\n #app .bp-amount span { font-size:18px; opacity:.65; }\r\n #app .bp-btn { background:rgba(255,255,255,.92); border:none; border-radius:100px; padding:10px 20px; font-family:'Manrope',sans-serif; font-size:13px; font-weight:800; color:#0d5829; cursor:pointer; transition:transform .12s; flex-shrink:0; }\r\n #app .bp-btn:active { transform:scale(.95); }\r\n #app .bp-vence { display:flex; align-items:center; gap:5px; margin-top:10px; font-size:11px; font-weight:600; color:rgba(255,255,255,.65); position:relative; z-index:2; }\r\n\r\n \/* Tarifa *\/\r\n #app .tarifa-card { margin:12px 14px 0; background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow); border:1.5px solid #eef0ee; overflow:hidden; }\r\n #app .tc-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; border-bottom:1px solid #f2f4f2; }\r\n #app .tc-h-left { display:flex; align-items:center; gap:10px; }\r\n #app .tc-icon { width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#1b9e4e,#0d5829); display:flex; align-items:center; justify-content:center; flex-shrink:0; }\r\n #app .tc-title { font-size:14px; font-weight:800; color:var(--text); }\r\n #app .tc-sub { font-size:11px; color:var(--light); margin-top:1px; }\r\n #app .tc-medidor { font-size:11px; color:var(--mid); font-weight:600; text-align:right; }\r\n #app .tc-medidor span { display:block; font-size:10px; color:var(--light); font-weight:500; }\r\n #app .tc-table { padding:10px 16px; }\r\n #app .tc-table-hdr { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:4px; padding:6px 0; border-bottom:1px solid #f2f4f2; margin-bottom:2px; }\r\n #app .tc-th { font-size:9px; font-weight:700; color:var(--light); text-transform:uppercase; letter-spacing:.4px; text-align:right; }\r\n #app .tc-th:first-child { text-align:left; }\r\n #app .tc-row { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:4px; padding:5px 0; border-bottom:1px solid #fafafa; }\r\n #app .tc-row:last-child { border-bottom:none; }\r\n #app .tc-cell { font-size:11px; color:var(--text); font-weight:600; text-align:right; }\r\n #app .tc-cell:first-child { color:var(--mid); font-weight:500; text-align:left; }\r\n #app .tc-cell.green { color:var(--accent-dark); font-weight:700; }\r\n #app .consumo-bar-wrap { padding:10px 16px 14px; border-top:1px solid #f2f4f2; }\r\n #app .consumo-bar-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }\r\n #app .cbl-text { font-size:10px; color:var(--light); font-weight:600; }\r\n #app .cbl-badge { font-size:10px; font-weight:700; color:var(--accent-dark); background:#eaf7ef; border-radius:100px; padding:2px 8px; }\r\n #app .consumo-track { height:8px; border-radius:100px; background:linear-gradient(90deg,#27c360 0%,#f5c518 50%,#e74c3c 100%); position:relative; }\r\n #app .consumo-needle { position:absolute; top:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; background:#fff; border:2.5px solid var(--text); box-shadow:0 2px 6px rgba(0,0,0,.2); left:42%; }\r\n #app .consumo-legend { display:flex; justify-content:space-between; margin-top:5px; }\r\n #app .cl-item { font-size:9px; color:var(--light); font-weight:600; }\r\n\r\n \/* Historial *\/\r\n #app .hist-card { background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow); padding:16px 16px; margin:12px 14px 0; border:1.5px solid #eef0ee; }\r\n #app .sec-hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }\r\n #app .sec-title { font-size:15px; font-weight:800; color:var(--text); }\r\n #app .sec-more { font-size:12px; font-weight:700; color:var(--accent); cursor:pointer; }\r\n #app .hist-item { display:flex; align-items:center; gap:11px; padding:10px 0; }\r\n #app .hist-item+.hist-item { border-top:1px solid #f2f4f2; }\r\n #app .hist-ico { width:36px; height:36px; border-radius:11px; background:#eaf7ef; display:flex; align-items:center; justify-content:center; flex-shrink:0; }\r\n #app .hist-mid { flex:1; }\r\n #app .hist-periodo { font-size:13px; font-weight:700; color:var(--text); }\r\n #app .hist-fecha { font-size:11px; color:var(--light); margin-top:1px; }\r\n #app .hist-r { text-align:right; }\r\n #app .hist-monto { font-size:14px; font-weight:800; color:var(--text); }\r\n #app .hist-ok { font-size:10px; font-weight:700; color:var(--accent); background:#eaf7ef; border-radius:100px; padding:2px 8px; display:inline-block; margin-top:3px; }\r\n\r\n \/* WA *\/\r\n #app .wa-section { margin:12px 14px 0; }\r\n #app .wa-lbl { font-size:12px; font-weight:600; color:var(--mid); margin-bottom:8px; }\r\n #app .wa-row { display:flex; gap:9px; }\r\n #app .wa-btn { flex:1; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); padding:13px 12px; cursor:pointer; display:flex; align-items:center; gap:9px; transition:transform .12s; text-decoration:none; border:1.5px solid #eef0ee; }\r\n #app .wa-btn:active { transform:scale(.97); }\r\n #app .wa-ico { width:32px; height:32px; border-radius:10px; background:#e8f7ee; display:flex; align-items:center; justify-content:center; flex-shrink:0; }\r\n #app .wa-nm { font-size:12px; font-weight:800; color:var(--text); }\r\n #app .wa-sub { font-size:10px; color:var(--light); }\r\n #app .call-btn { display:flex; align-items:center; gap:12px; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); padding:14px 16px; margin-top:9px; text-decoration:none; border:1.5px solid #eef0ee; transition:transform .12s; }\r\n #app .call-btn:active { transform:scale(.97); }\r\n #app .call-ico { width:40px; height:40px; border-radius:50%; background:#e8f7ee; display:flex; align-items:center; justify-content:center; flex-shrink:0; }\r\n #app .call-info { flex:1; }\r\n #app .call-nm { font-size:13px; font-weight:800; color:var(--text); }\r\n #app .call-num { font-size:11px; color:var(--light); margin-top:1px; font-weight:500; }\r\n #app .call-arrow { color:var(--light); }\r\n\r\n \/* HOME POST-PAGO *\/\r\n #app #s-home-ok { background:#fff; }\r\n #app .zero-banner { margin:14px 14px 0; background:linear-gradient(130deg,#eaf7ee 0%,#f4fbf6 100%); border:1.5px solid rgba(39,195,96,.18); border-radius:var(--r-xl); padding:24px 20px; text-align:center; }\r\n #app .zero-icon { font-size:32px; margin-bottom:6px; }\r\n #app .zero-title { font-size:22px; font-weight:900; color:#0d5829; }\r\n #app .zero-sub { font-size:12px; color:#4a8a5e; margin-top:3px; }\r\n #app .ult-card { background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow); padding:14px 16px; margin:12px 14px 0; border:1.5px solid #eef0ee; }\r\n #app .ult-row { display:flex; align-items:center; gap:11px; }\r\n #app .ult-ico { width:40px; height:40px; border-radius:12px; background:#eaf7ef; display:flex; align-items:center; justify-content:center; flex-shrink:0; }\r\n #app .ult-mid { flex:1; }\r\n #app .ult-name { font-size:14px; font-weight:700; color:var(--text); }\r\n #app .ult-folio { font-size:11px; color:var(--light); margin-top:2px; }\r\n #app .ult-r { text-align:right; }\r\n #app .ult-monto { font-size:17px; font-weight:900; color:var(--accent); }\r\n #app .ult-fecha { font-size:11px; color:var(--light); margin-top:2px; }\r\n\r\n \/* CONFIRMAR *\/\r\n #app #s-prepago { background:var(--bg); }\r\n #app .receipt-wrap { margin:14px 14px 0; background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow-md); overflow:hidden; border:1.5px solid #eef0ee; }\r\n #app .receipt-top { padding:20px 18px 16px; border-bottom:1.5px dashed #e8ebe8; display:flex; align-items:center; justify-content:space-between; }\r\n #app .rt-empresa { font-size:10px; font-weight:700; color:var(--light); text-transform:uppercase; letter-spacing:.6px; }\r\n #app .rt-concepto { font-size:15px; font-weight:900; color:var(--text); margin-top:3px; }\r\n #app .rt-periodo { font-size:12px; color:var(--mid); margin-top:2px; }\r\n #app .rt-logo { width:42px; height:42px; border-radius:12px; background:linear-gradient(145deg,#1b9e4e,#0d5829); display:flex; align-items:center; justify-content:center; flex-shrink:0; }\r\n #app .receipt-body { padding:0 18px; }\r\n #app .rb-row { display:flex; justify-content:space-between; align-items:center; padding:11px 0; }\r\n #app .rb-row+.rb-row { border-top:1px solid #f2f4f2; }\r\n #app .rb-l { font-size:13px; color:#8a9a8d; font-weight:500; }\r\n #app .rb-r { font-size:13px; font-weight:700; color:var(--text); }\r\n #app .receipt-total { padding:14px 18px; border-top:1.5px dashed #e8ebe8; background:#f9fbf9; display:flex; justify-content:space-between; align-items:center; }\r\n #app .rtot-l { font-size:14px; font-weight:700; color:var(--text); }\r\n #app .rtot-r { font-size:22px; font-weight:900; color:var(--text); letter-spacing:-1px; }\r\n #app .method-pill { margin:12px 14px 0; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); padding:13px 15px; display:flex; align-items:center; gap:11px; cursor:pointer; border:1.5px solid #eef0ee; }\r\n #app .mp-ico { width:34px; height:34px; border-radius:10px; background:#eaf7ef; display:flex; align-items:center; justify-content:center; flex-shrink:0; }\r\n #app .mp-name { font-size:14px; font-weight:700; color:var(--text); }\r\n #app .mp-sub { font-size:11px; color:var(--light); }\r\n\r\n \/* SHARE *\/\r\n #app #s-share { background:rgba(0,0,0,.55); }\r\n #app .share-sheet { position:absolute; bottom:0; left:0; right:0; background:#fff; border-radius:var(--r-xl) var(--r-xl) 0 0; padding:10px 18px 50px; }\r\n #app .share-handle { width:36px; height:4px; border-radius:2px; background:#e0e0e0; margin:0 auto 18px; }\r\n #app .share-title { font-size:16px; font-weight:800; color:var(--text); margin-bottom:3px; }\r\n #app .share-sub { font-size:13px; color:var(--mid); margin-bottom:20px; }\r\n #app .share-opts { display:flex; gap:12px; }\r\n #app .share-opt { flex:1; border-radius:var(--r-lg); padding:18px 12px; display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; border:1px solid #efefef; transition:transform .12s; text-decoration:none; }\r\n #app .share-opt:active { transform:scale(.96); }\r\n #app .share-opt.wa { background:#edfaf3; border-color:#c7edda; }\r\n #app .share-opt.sms { background:#f0f0ff; border-color:#d0d0f5; }\r\n #app .so-ico { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; }\r\n #app .share-opt.wa .so-ico { background:#25d366; }\r\n #app .share-opt.sms .so-ico { background:#5856d6; }\r\n #app .so-name { font-size:13px; font-weight:800; color:var(--text); }\r\n #app .share-cancel { width:100%; padding:14px; margin-top:12px; background:none; border:none; border-radius:var(--r-xl); font-family:'Manrope',sans-serif; font-size:15px; font-weight:700; color:var(--mid); cursor:pointer; }\r\n\r\n \/* PAGO *\/\r\n #app #s-pago { background:var(--bg); }\r\n #app .pago-tabs { display:flex; background:#f2f4f2; border-radius:100px; padding:3px; margin-top:12px; }\r\n #app .pago-tab { flex:1; padding:9px; border-radius:100px; font-size:13px; font-weight:700; color:var(--mid); border:none; background:transparent; cursor:pointer; font-family:'Manrope',sans-serif; transition:background .15s,color .15s; }\r\n #app .pago-tab.active { background:#fff; color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.09); }\r\n #app .pago-body { flex:1; overflow-y:auto; padding:16px 14px 0; scrollbar-width:none; }\r\n #app .pago-body::-webkit-scrollbar { display:none; }\r\n #app .visual-card { height:170px; border-radius:var(--r-xl); background:linear-gradient(135deg,#133a1e 0%,#0c2814 50%,#081a0e 100%); position:relative; overflow:hidden; margin-bottom:18px; box-shadow:0 12px 36px rgba(0,0,0,.22); }\r\n #app .vc-circle { position:absolute; border-radius:50%; background:rgba(255,255,255,.04); }\r\n #app .vc-logo { position:absolute; top:16px; left:16px; font-size:12px; font-weight:900; color:rgba(255,255,255,.8); letter-spacing:.5px; display:flex; align-items:center; gap:6px; }\r\n #app .vc-chip { position:absolute; top:16px; right:16px; width:28px; height:20px; border-radius:4px; background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.1)); }\r\n #app .vc-num { position:absolute; bottom:40px; left:16px; font-size:13px; font-weight:700; color:rgba(255,255,255,.8); letter-spacing:1.5px; }\r\n #app .vc-name { position:absolute; bottom:16px; left:16px; font-size:10px; font-weight:600; color:rgba(255,255,255,.45); }\r\n #app .vc-circles { position:absolute; bottom:12px; right:16px; display:flex; }\r\n #app .vc-c { width:24px; height:24px; border-radius:50%; }\r\n #app .vc-c1 { background:rgba(255,180,0,.72); margin-right:-8px; }\r\n #app .vc-c2 { background:rgba(220,50,50,.68); }\r\n #app .input-grp { margin-bottom:12px; }\r\n #app .input-lbl { font-size:10px; font-weight:700; color:var(--mid); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }\r\n #app .inp { width:100%; padding:13px 15px; background:#fff; border:1.5px solid #e4e8e4; border-radius:var(--r-md); font-family:'Manrope',sans-serif; font-size:15px; font-weight:600; color:var(--text); outline:none; transition:border-color .2s; }\r\n #app .inp:focus { border-color:var(--accent); }\r\n #app .input-row { display:flex; gap:10px; }\r\n #app .input-row .input-grp { flex:1; }\r\n #app .input-copy-wrap { position:relative; }\r\n #app .input-copy-wrap .inp { padding-right:48px; }\r\n #app .copy-btn { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:rgba(39,195,96,.1); border:none; border-radius:8px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; }\r\n #app .copy-btn:active { background:rgba(39,195,96,.22); }\r\n #app .clabe-note { background:#fff8e8; border:1px solid rgba(230,163,0,.25); border-radius:var(--r-md); padding:11px 13px; margin-bottom:12px; display:flex; align-items:flex-start; gap:8px; }\r\n #app .cn-text { font-size:12px; font-weight:700; color:#a07000; }\r\n #app .copy-toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); background:var(--text); color:#fff; font-size:12px; font-weight:700; padding:8px 18px; border-radius:100px; opacity:0; transition:opacity .2s; pointer-events:none; z-index:100; }\r\n #app .copy-toast.show { opacity:1; }\r\n\r\n \/* PROCESANDO *\/\r\n #app #s-valid { background:#071510; }\r\n #app .valid-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 36px; }\r\n #app .spinner { width:70px; height:70px; border:3px solid rgba(39,195,96,.2); border-top-color:var(--accent); border-radius:50%; animation:spin .85s linear infinite; margin-bottom:34px; }\r\n @keyframes spin { to { transform:rotate(360deg); } }\r\n #app .valid-title { font-size:22px; font-weight:900; color:#fff; text-align:center; letter-spacing:-.5px; }\r\n #app .valid-sub { font-size:14px; color:rgba(255,255,255,.38); text-align:center; margin-top:8px; }\r\n #app .vsteps { margin-top:40px; width:100%; display:flex; flex-direction:column; gap:15px; }\r\n #app .vstep { display:flex; align-items:center; gap:13px; opacity:0; transform:translateY(10px); animation:fadeup .45s forwards; }\r\n #app .vstep:nth-child(1) { animation-delay:.5s; }\r\n #app .vstep:nth-child(2) { animation-delay:1.3s; }\r\n #app .vstep:nth-child(3) { animation-delay:2.1s; }\r\n @keyframes fadeup { to { opacity:1; transform:translateY(0); } }\r\n #app .vstep-ico { width:32px; height:32px; border-radius:50%; background:rgba(39,195,96,.1); border:1px solid rgba(39,195,96,.22); display:flex; align-items:center; justify-content:center; flex-shrink:0; }\r\n #app .vstep-text { font-size:15px; font-weight:700; color:#fff; }\r\n\r\n \/* APROBADO *\/\r\n #app #s-aprobado { background:#071510; }\r\n #app .confetti-layer { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }\r\n #app .ap-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 26px; position:relative; z-index:1; }\r\n #app .ap-check { width:90px; height:90px; border-radius:50%; background:rgba(39,195,96,.1); border:2px solid rgba(39,195,96,.28); display:flex; align-items:center; justify-content:center; animation:pop .5s cubic-bezier(.175,.885,.32,1.275); }\r\n @keyframes pop { from{transform:scale(.3);opacity:0} to{transform:scale(1);opacity:1} }\r\n #app .ap-title { font-size:26px; font-weight:900; color:#fff; text-align:center; letter-spacing:-.8px; margin-top:20px; line-height:1.2; }\r\n #app .ap-amount { font-size:50px; font-weight:900; color:var(--accent); letter-spacing:-3px; margin-top:10px; line-height:1; }\r\n #app .ap-tag { margin-top:12px; background:rgba(39,195,96,.1); border:1px solid rgba(39,195,96,.2); border-radius:100px; padding:7px 15px; font-size:12px; font-weight:700; color:var(--accent); display:flex; align-items:center; gap:6px; }\r\n #app .ap-details { margin-top:18px; width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:var(--r-lg); overflow:hidden; }\r\n #app .ap-det-row { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; }\r\n #app .ap-det-row+.ap-det-row { border-top:1px solid rgba(255,255,255,.05); }\r\n #app .ap-dl { font-size:11px; color:rgba(255,255,255,.38); font-weight:600; }\r\n #app .ap-dr { font-size:13px; font-weight:800; color:#fff; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"app\">\r\n <div class=\"phone\">\r\n\r\n <!-- \u2550\u2550\u2550 LOADER \u2550\u2550\u2550 -->\r\n <div id=\"s-loader\">\r\n <svg class=\"loader-logo\" viewbox=\"0 0 136.14 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path fill=\"#fff\" d=\"M54.12,63.25s-2.37,3.15-4.59,4.15c-2.43,1.09-3.84,1.08-5.3.99-1.15-.07-6.91-1.53-7.05-8.84-.08-4.6,1.7-8.38,3.38-10.37,1.68-1.98,3.91-4.33,8.15-4.33,3.62,0,4.98,1.62,6.06,2.71,1.24,1.23,1.91,3.79,1.91,3.79h4.24s-.72-5.19-4.1-7.94c-2.34-1.9-6.33-3.35-10.39-2.53-4.06.82-7.06,3.3-9.54,6.77-1.87,2.61-3.43,6.5-3.79,10.73-.36,4.24.94,8.03,2.94,10.38,2.45,2.88,5.14,3.88,8.99,3.88s5.93-1.2,7.62-2.26c4.18-2.61,6.02-7.12,6.02-7.12h-4.55Z\"\/>\r\n <path fill=\"#fff\" d=\"M89.1,60.76c.76,0,11.72,0,11.72,0l1.3-8.49h-11.41c.16-.86.76-4.08.88-4.7h11.56l1.68-8.27h-40.03l-2.12,11.3c-.46-2.31-1.62-5.95-4.48-8.65-2.9-2.72-7.48-3.93-11.67-3.08-4.2.84-8.19,3.54-10.95,7.4-1.67,2.34-3.76,6.37-4.21,12.3-.33,4.33.89,8.7,3.19,11.4,2.74,3.22,5.85,4.58,10.4,4.56,4.34-.02,6.93-1.39,8.5-2.42,3.34-2.19,5.39-5.13,6.55-7.31l-1.76,9.38,8.58.08s2.63-12.78,2.79-13.52c.63,0,8.19,0,10.66,0l-2.53,13.44h20.17l1.75-8.47h-11.56c.18-.89.89-4.37,1.02-4.98h-.03ZM81.85,52.28h-10.65c.16-.86.76-4.08.88-4.7h10.66l-.88,4.7h-.01ZM53.07,71.28c-1.49.97-3.94,2.27-8.07,2.28-4.32.02-7.27-1.26-9.85-4.3-2.14-2.51-3.28-6.6-2.97-10.66.44-5.67,2.42-9.5,4-11.72,2.62-3.66,6.41-6.23,10.4-7.03,3.98-.8,8.3.34,11.03,2.9,3.47,3.26,4.28,8.09,4.45,9.67h-6.11c-.15-.8-.66-2.71-2.24-4.4-.81-.87-2.61-2.28-5.58-1.99-3.55.35-5.26,1.73-7.01,3.99-1.3,1.69-2.71,3.9-2.98,8.79-.28,5.24,3.08,8.45,6.48,8.53h.22c1.39.03,2.15.05,4.64-1.07,2.07-.93,3.67-3.35,4.13-4.12h6.65c-.6,1.59-2.64,6.13-7.21,9.13h.02ZM53.22,61.16l-.14.25s-1.7,2.98-3.84,3.94c-2.33,1.05-2.95,1.03-4.31,1h-.22c-3.01-.07-5.97-2.91-5.72-7.56.25-4.56,1.49-6.53,2.74-8.15,1.63-2.11,3.14-3.31,6.41-3.64,2.67-.26,4.26.99,4.98,1.76,1.8,1.93,2.06,4.22,2.06,4.24l.04.4h6.91l-1.46,7.76h-7.46,0ZM68.79,59.77s-2.63,12.77-2.79,13.51c-.67,0-5.63-.05-6.58-.06.21-1.1,6.04-32.16,6.19-32.93h18.49l-1.18,6.3h-11.67l-1.25,6.67h11.66l-1.23,6.52h-11.65.01ZM98.43,66.72c-.2.95-1.21,5.86-1.34,6.51h-18.16c.2-1.08,5.68-30.21,6.16-32.76l.03-.17h18.49c-.19.94-1.15,5.65-1.28,6.3h-11.58l-1.25,6.67h11.45c-.14.91-.89,5.83-1,6.52-.79,0-11.67,0-11.67,0l-1.42,6.95h11.57Z\"\/>\r\n <polygon fill=\"#fff\" points=\"87.19 58.67 98.9 58.67 99.59 54.44 88.02 54.44 89.85 45.55 101.42 45.55 102.32 41.38 85.85 41.38 79.96 72.12 96.22 72.12 97.14 67.82 85.32 67.82 87.19 58.67\"\/>\r\n <polygon fill=\"#fff\" points=\"68.61 54.44 70.16 45.55 81.86 45.55 82.71 41.38 66.44 41.38 60.55 72.12 65.03 72.12 67.78 58.67 79.49 58.67 80.18 54.44 68.61 54.44\"\/>\r\n <\/svg>\r\n \r\n <div class=\"loader-track\">\r\n <div class=\"loader-bar\" id=\"loader-bar\"><\/div>\r\n <\/div>\r\n <p class=\"loader-tagline\">Comisi\u00f3n Federal de Electricidad<\/p>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550 HOME \u2550\u2550\u2550 -->\r\n <div class=\"screen\" id=\"s-home\">\r\n <div class=\"home-nav\">\r\n <div class=\"home-nav-info\">\r\n <p class=\"home-nav-title\">Mi recibo CFE<\/p>\r\n <p class=\"home-nav-sub\">0234-5678-9012<\/p>\r\n <\/div>\r\n <div class=\"home-nav-badge\"><div class=\"sdot\"><\/div>Activo<\/div>\r\n <\/div>\r\n <div class=\"scroll\">\r\n <div style=\"padding-bottom:30px;\">\r\n <div class=\"banner-pendiente\" onclick=\"goTo('s-prepago')\">\r\n <p class=\"bp-eyebrow\">Recibo pendiente \u00b7 Ene \u2013 Feb 2026<\/p>\r\n <p class=\"bp-title\">Tienes un pago<br>pendiente<\/p>\r\n <p class=\"bp-sub\">Folio CFE-2026-043817 \u00b7 Dom\u00e9stica 1C<\/p>\r\n <div class=\"bp-vence\">\r\n <svg width=\"11\" height=\"11\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 8v4l2 2\"\/><\/svg>\r\n Vence el 25 mayo 2026 \u00b7 quedan 5 d\u00edas\r\n <\/div>\r\n <div class=\"bp-bottom\">\r\n <p class=\"bp-amount\">$500<span>.00<\/span><\/p>\r\n <button class=\"bp-btn\">Pagar ahora<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tarifa-card\">\r\n <div class=\"tc-header\">\r\n <div class=\"tc-h-left\">\r\n <div class=\"tc-icon\"><svg width=\"15\" height=\"15\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" fill=\"white\"\/><\/svg><\/div>\r\n <div><p class=\"tc-title\">Tarifa Dom\u00e9stica 1C<\/p><p class=\"tc-sub\">Calle Reforma #123, Col. Centro<\/p><\/div>\r\n <\/div>\r\n <div class=\"tc-medidor\"><span>Medidor<\/span>B364436<\/div>\r\n <\/div>\r\n <div class=\"tc-table\">\r\n <div class=\"tc-table-hdr\"><span class=\"tc-th\">Concepto<\/span><span class=\"tc-th\">kWh<\/span><span class=\"tc-th\">$\/kWh<\/span><span class=\"tc-th\">Importe<\/span><\/div>\r\n <div class=\"tc-row\"><span class=\"tc-cell\">B\u00e1sico<\/span><span class=\"tc-cell\">150<\/span><span class=\"tc-cell\">0.793<\/span><span class=\"tc-cell green\">$118.95<\/span><\/div>\r\n <div class=\"tc-row\"><span class=\"tc-cell\">Intermedio<\/span><span class=\"tc-cell\">85<\/span><span class=\"tc-cell\">0.950<\/span><span class=\"tc-cell green\">$80.75<\/span><\/div>\r\n <div class=\"tc-row\"><span class=\"tc-cell\">Excedente<\/span><span class=\"tc-cell\">13<\/span><span class=\"tc-cell\">2.802<\/span><span class=\"tc-cell green\">$36.43<\/span><\/div>\r\n <div class=\"tc-row\" style=\"border-top:1.5px solid #eef0ee;padding-top:8px;margin-top:2px;\">\r\n <span class=\"tc-cell\" style=\"font-weight:700;color:var(--text);\">Total<\/span>\r\n <span class=\"tc-cell\" style=\"font-weight:800;color:var(--text);\">248<\/span>\r\n <span class=\"tc-cell\"><\/span>\r\n <span class=\"tc-cell\" style=\"font-weight:800;color:var(--text);\">$500.00<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"consumo-bar-wrap\">\r\n <div class=\"consumo-bar-label\"><span class=\"cbl-text\">Nivel de consumo \u00b7 248 kWh<\/span><span class=\"cbl-badge\">Intermedio<\/span><\/div>\r\n <div class=\"consumo-track\"><div class=\"consumo-needle\"><\/div><\/div>\r\n <div class=\"consumo-legend\"><span class=\"cl-item\">B\u00e1sico<\/span><span class=\"cl-item\">Intermedio<\/span><span class=\"cl-item\">Excedente<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hist-card\">\r\n <div class=\"sec-hdr\"><span class=\"sec-title\">Historial de pagos<\/span><span class=\"sec-more\">Ver todo<\/span><\/div>\r\n <div class=\"hist-item\">\r\n <div class=\"hist-ico\"><svg width=\"15\" height=\"15\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg><\/div>\r\n <div class=\"hist-mid\"><p class=\"hist-periodo\">Nov \u2013 Dic 2025<\/p><p class=\"hist-fecha\">15 Dic 2025<\/p><\/div>\r\n <div class=\"hist-r\"><p class=\"hist-monto\">$480.00<\/p><span class=\"hist-ok\">Pagado<\/span><\/div>\r\n <\/div>\r\n <div class=\"hist-item\">\r\n <div class=\"hist-ico\"><svg width=\"15\" height=\"15\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg><\/div>\r\n <div class=\"hist-mid\"><p class=\"hist-periodo\">Sep \u2013 Oct 2025<\/p><p class=\"hist-fecha\">14 Oct 2025<\/p><\/div>\r\n <div class=\"hist-r\"><p class=\"hist-monto\">$520.00<\/p><span class=\"hist-ok\">Pagado<\/span><\/div>\r\n <\/div>\r\n <div class=\"hist-item\">\r\n <div class=\"hist-ico\"><svg width=\"15\" height=\"15\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg><\/div>\r\n <div class=\"hist-mid\"><p class=\"hist-periodo\">Jul \u2013 Ago 2025<\/p><p class=\"hist-fecha\">16 Ago 2025<\/p><\/div>\r\n <div class=\"hist-r\"><p class=\"hist-monto\">$550.00<\/p><span class=\"hist-ok\">Pagado<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"wa-section\" style=\"margin-bottom:16px;\">\r\n <p class=\"wa-lbl\">\u00bfNecesitas ayuda?<\/p>\r\n <div class=\"wa-row\">\r\n <a class=\"wa-btn\" href=\"https:\/\/wa.me\/5215599629074?text=Hola,%20necesito%20ayuda%20con%20mi%20servicio%20de%20CFE\" target=\"_blank\">\r\n <div class=\"wa-ico\"><svg width=\"17\" height=\"17\" viewbox=\"0 0 24 24\" fill=\"var(--accent)\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z\"\/><path d=\"M11.99 2C6.477 2 2 6.48 2 11.99c0 1.743.453 3.379 1.245 4.803L2 22l5.351-1.404A9.962 9.962 0 0011.99 22c5.512 0 9.989-4.477 9.989-9.989C21.979 6.499 17.502 2 11.99 2z\"\/><\/svg><\/div>\r\n <div><p class=\"wa-nm\">Atenci\u00f3n al cliente<\/p><p class=\"wa-sub\">Estamos para ayudarte<\/p><\/div>\r\n <\/a>\r\n <a class=\"wa-btn\" href=\"https:\/\/wa.me\/5215599630783?text=Hola,%20necesito%20ayuda%20con%20mi%20pago%20de%20CFE\" target=\"_blank\">\r\n <div class=\"wa-ico\"><svg width=\"17\" height=\"17\" viewbox=\"0 0 24 24\" fill=\"var(--accent)\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z\"\/><path d=\"M11.99 2C6.477 2 2 6.48 2 11.99c0 1.743.453 3.379 1.245 4.803L2 22l5.351-1.404A9.962 9.962 0 0011.99 22c5.512 0 9.989-4.477 9.989-9.989C21.979 6.499 17.502 2 11.99 2z\"\/><\/svg><\/div>\r\n <div><p class=\"wa-nm\">CFE Pagos<\/p><p class=\"wa-sub\">Soporte de pagos<\/p><\/div>\r\n <\/a>\r\n <\/div>\r\n <a class=\"call-btn\" href=\"tel:+525592251865\">\r\n <div class=\"call-ico\"><svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"var(--accent)\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M19.95 21C11.69 21 3 12.31 3 4.05C3 3.47 3.47 3 4.05 3H7.79C8.3 3 8.73 3.39 8.79 3.9L9.39 8.09C9.44 8.46 9.32 8.83 9.06 9.09L6.97 11.18C8.38 14.14 9.86 15.62 12.82 17.03L14.91 14.94C15.17 14.68 15.54 14.56 15.91 14.61L20.1 15.21C20.61 15.27 21 15.7 21 16.21V19.95C21 20.53 20.53 21 19.95 21Z\"\/><\/svg><\/div>\r\n <div class=\"call-info\"><p class=\"call-nm\">Llamar a un asesor<\/p><p class=\"call-num\">+52 55 9225 1865<\/p><\/div>\r\n <svg class=\"call-arrow\" width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550 HOME POST-PAGO \u2550\u2550\u2550 -->\r\n <div class=\"screen\" id=\"s-home-ok\" style=\"background:#fff;\">\r\n <div class=\"home-nav\">\r\n <div class=\"home-nav-info\"><p class=\"home-nav-title\">Mi recibo CFE<\/p><p class=\"home-nav-sub\">0234-5678-9012<\/p><\/div>\r\n <div class=\"home-nav-badge\"><div class=\"sdot\"><\/div>Activo<\/div>\r\n <\/div>\r\n <div class=\"scroll\">\r\n <div style=\"padding-bottom:30px;\">\r\n <div class=\"zero-banner\">\r\n <div class=\"zero-icon\">\u26a1<\/div>\r\n <p class=\"zero-title\">Sin adeudos<\/p>\r\n <p class=\"zero-sub\">Calle Reforma #123, Col. Centro<\/p>\r\n <\/div>\r\n <div class=\"tarifa-card\">\r\n <div class=\"tc-header\">\r\n <div class=\"tc-h-left\">\r\n <div class=\"tc-icon\"><svg width=\"15\" height=\"15\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" fill=\"white\"\/><\/svg><\/div>\r\n <div><p class=\"tc-title\">Tarifa Dom\u00e9stica 1C<\/p><p class=\"tc-sub\">Calle Reforma #123, Col. Centro<\/p><\/div>\r\n <\/div>\r\n <div class=\"tc-medidor\"><span>Medidor<\/span>B364436<\/div>\r\n <\/div>\r\n <div class=\"tc-table\">\r\n <div class=\"tc-table-hdr\"><span class=\"tc-th\">Concepto<\/span><span class=\"tc-th\">kWh<\/span><span class=\"tc-th\">$\/kWh<\/span><span class=\"tc-th\">Importe<\/span><\/div>\r\n <div class=\"tc-row\"><span class=\"tc-cell\">B\u00e1sico<\/span><span class=\"tc-cell\">150<\/span><span class=\"tc-cell\">0.793<\/span><span class=\"tc-cell green\">$118.95<\/span><\/div>\r\n <div class=\"tc-row\"><span class=\"tc-cell\">Intermedio<\/span><span class=\"tc-cell\">85<\/span><span class=\"tc-cell\">0.950<\/span><span class=\"tc-cell green\">$80.75<\/span><\/div>\r\n <div class=\"tc-row\"><span class=\"tc-cell\">Excedente<\/span><span class=\"tc-cell\">13<\/span><span class=\"tc-cell\">2.802<\/span><span class=\"tc-cell green\">$36.43<\/span><\/div>\r\n <div class=\"tc-row\" style=\"border-top:1.5px solid #eef0ee;padding-top:8px;margin-top:2px;\">\r\n <span class=\"tc-cell\" style=\"font-weight:700;color:var(--text);\">Total<\/span>\r\n <span class=\"tc-cell\" style=\"font-weight:800;color:var(--text);\">248<\/span>\r\n <span class=\"tc-cell\"><\/span>\r\n <span class=\"tc-cell\" style=\"font-weight:800;color:var(--text);\">$500.00<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"consumo-bar-wrap\">\r\n <div class=\"consumo-bar-label\"><span class=\"cbl-text\">Nivel de consumo \u00b7 248 kWh<\/span><span class=\"cbl-badge\">Intermedio<\/span><\/div>\r\n <div class=\"consumo-track\"><div class=\"consumo-needle\"><\/div><\/div>\r\n <div class=\"consumo-legend\"><span class=\"cl-item\">B\u00e1sico<\/span><span class=\"cl-item\">Intermedio<\/span><span class=\"cl-item\">Excedente<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ult-card\">\r\n <div class=\"sec-hdr\"><span class=\"sec-title\">\u00daltimo pago<\/span><span class=\"hist-ok\">Exitoso<\/span><\/div>\r\n <div class=\"ult-row\">\r\n <div class=\"ult-ico\"><svg width=\"17\" height=\"17\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg><\/div>\r\n <div class=\"ult-mid\"><p class=\"ult-name\">Ene \u2013 Feb 2026<\/p><p class=\"ult-folio\">Folio: CFE-2026-043817<\/p><\/div>\r\n <div class=\"ult-r\"><p class=\"ult-monto\">$500.00<\/p><p class=\"ult-fecha\">20 may 2026<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"wa-section\" style=\"margin-bottom:16px;\">\r\n <p class=\"wa-lbl\">\u00bfNecesitas ayuda?<\/p>\r\n <div class=\"wa-row\">\r\n <a class=\"wa-btn\" href=\"https:\/\/wa.me\/5215599629074?text=Hola,%20necesito%20ayuda%20con%20mi%20servicio%20de%20CFE\" target=\"_blank\">\r\n <div class=\"wa-ico\"><svg width=\"17\" height=\"17\" viewbox=\"0 0 24 24\" fill=\"var(--accent)\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z\"\/><path d=\"M11.99 2C6.477 2 2 6.48 2 11.99c0 1.743.453 3.379 1.245 4.803L2 22l5.351-1.404A9.962 9.962 0 0011.99 22c5.512 0 9.989-4.477 9.989-9.989C21.979 6.499 17.502 2 11.99 2z\"\/><\/svg><\/div>\r\n <div><p class=\"wa-nm\">Atenci\u00f3n al cliente<\/p><p class=\"wa-sub\">Estamos para ayudarte<\/p><\/div>\r\n <\/a>\r\n <a class=\"wa-btn\" href=\"https:\/\/wa.me\/5215599630783?text=Hola,%20necesito%20ayuda%20con%20mi%20pago%20de%20CFE\" target=\"_blank\">\r\n <div class=\"wa-ico\"><svg width=\"17\" height=\"17\" viewbox=\"0 0 24 24\" fill=\"var(--accent)\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z\"\/><path d=\"M11.99 2C6.477 2 2 6.48 2 11.99c0 1.743.453 3.379 1.245 4.803L2 22l5.351-1.404A9.962 9.962 0 0011.99 22c5.512 0 9.989-4.477 9.989-9.989C21.979 6.499 17.502 2 11.99 2z\"\/><\/svg><\/div>\r\n <div><p class=\"wa-nm\">CFE Pagos<\/p><p class=\"wa-sub\">Soporte de pagos<\/p><\/div>\r\n <\/a>\r\n <\/div>\r\n <a class=\"call-btn\" href=\"tel:+525592251865\">\r\n <div class=\"call-ico\"><svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81a19.79 19.79 0 01-3.07-8.67A2 2 0 012 1h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z\"\/><\/svg><\/div>\r\n <div class=\"call-info\"><p class=\"call-nm\">Llamar a un asesor<\/p><p class=\"call-num\">+52 55 9225 1865<\/p><\/div>\r\n <svg class=\"call-arrow\" width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550 CONFIRMAR \u2550\u2550\u2550 -->\r\n <div class=\"screen\" id=\"s-prepago\" style=\"background:var(--bg);\">\r\n <div class=\"nav\">\r\n <button class=\"back-btn\" onclick=\"goTo('s-home')\"><svg width=\"17\" height=\"17\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--text)\" stroke-width=\"2.5\"><path d=\"M19 12H5M12 5l-7 7 7 7\"\/><\/svg><\/button>\r\n <span class=\"nav-title\">Confirmar pago<\/span>\r\n <\/div>\r\n <div class=\"scroll\" style=\"padding-bottom:20px;\">\r\n <div class=\"receipt-wrap\">\r\n <div class=\"receipt-top\">\r\n <div><p class=\"rt-empresa\">CFE<\/p><p class=\"rt-concepto\">Recibo de energ\u00eda el\u00e9ctrica<\/p><p class=\"rt-periodo\">Ene \u2013 Feb 2026 \u00b7 Folio CFE-2026-043817<\/p><\/div>\r\n <div class=\"rt-logo\"><svg width=\"20\" height=\"20\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" fill=\"white\" stroke=\"white\" stroke-width=\"1.2\" stroke-linejoin=\"round\"\/><\/svg><\/div>\r\n <\/div>\r\n <div class=\"receipt-body\">\r\n <div class=\"rb-row\"><span class=\"rb-l\">N\u00famero de servicio<\/span><span class=\"rb-r\">0234-5678-9012<\/span><\/div>\r\n <div class=\"rb-row\"><span class=\"rb-l\">Consumo<\/span><span class=\"rb-r\">248 kWh<\/span><\/div>\r\n <div class=\"rb-row\"><span class=\"rb-l\">Periodo<\/span><span class=\"rb-r\">Ene \u2013 Feb 2026<\/span><\/div>\r\n <div class=\"rb-row\"><span class=\"rb-l\">Tarifa<\/span><span class=\"rb-r\">Dom\u00e9stica 1C<\/span><\/div>\r\n <div class=\"rb-row\"><span class=\"rb-l\">Fecha l\u00edmite<\/span><span class=\"rb-r\" style=\"color:#e67e22;\">25 mayo 2026<\/span><\/div>\r\n <div class=\"rb-row\"><span class=\"rb-l\">Comisi\u00f3n<\/span><span class=\"rb-r\" style=\"color:#27c360;\">Gratis<\/span><\/div>\r\n <\/div>\r\n <div class=\"receipt-total\"><span class=\"rtot-l\">Total a pagar<\/span><span class=\"rtot-r\">$500.00<\/span><\/div>\r\n <\/div>\r\n <div class=\"method-pill\" onclick=\"goTo('s-pago')\">\r\n <div class=\"mp-ico\"><svg width=\"15\" height=\"15\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\"><rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"3\"\/><line x1=\"2\" y1=\"10\" x2=\"22\" y2=\"10\"\/><\/svg><\/div>\r\n <div style=\"flex:1;\"><p class=\"mp-name\">Tarjeta \u00b7 \u2022\u2022\u2022\u2022 4521<\/p><p class=\"mp-sub\">Visa D\u00e9bito<\/p><\/div>\r\n <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#c0c8c1\" stroke-width=\"2.5\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\r\n <\/div>\r\n <div style=\"padding:14px 14px 0;display:flex;flex-direction:column;\">\r\n <button class=\"btn-cta\" onclick=\"goTo('s-pago')\">Seleccionar m\u00e9todo de pago<\/button>\r\n <button class=\"btn-ghost\" onclick=\"goTo('s-share')\">Compartir enlace de pago<\/button>\r\n <\/div>\r\n <div style=\"height:30px;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550 SHARE \u2550\u2550\u2550 -->\r\n <div class=\"screen\" id=\"s-share\" style=\"background:rgba(0,0,0,.55);\">\r\n <div style=\"flex:1;\" onclick=\"goTo('s-prepago')\"><\/div>\r\n <div class=\"share-sheet\">\r\n <div class=\"share-handle\"><\/div>\r\n <p class=\"share-title\">Compartir enlace de pago<\/p>\r\n <p class=\"share-sub\">CFE \u00b7 $500.00 \u00b7 Ene \u2013 Feb 2026<\/p>\r\n <div class=\"share-opts\">\r\n <a class=\"share-opt wa\" href=\"https:\/\/wa.me\/?text=Mi%20recibo%20CFE%3A%20%24500%20-%20https%3A%2F%2Fcfe.mx%2Fp%2F043817\" target=\"_blank\">\r\n <div class=\"so-ico\"><svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"white\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z\"\/><path d=\"M11.99 2C6.477 2 2 6.48 2 11.99c0 1.743.453 3.379 1.245 4.803L2 22l5.351-1.404A9.962 9.962 0 0011.99 22c5.512 0 9.989-4.477 9.989-9.989C21.979 6.499 17.502 2 11.99 2z\"\/><\/svg><\/div>\r\n <span class=\"so-name\">WhatsApp<\/span>\r\n <\/a>\r\n <a class=\"share-opt sms\" href=\"sms:?body=Mi%20recibo%20CFE%3A%20%24500%20-%20https%3A%2F%2Fcfe.mx%2Fp%2F043817\">\r\n <div class=\"so-ico\"><svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\"\/><\/svg><\/div>\r\n <span class=\"so-name\">SMS<\/span>\r\n <\/a>\r\n <\/div>\r\n <button class=\"share-cancel\" onclick=\"goTo('s-prepago')\">Cancelar<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550 PAGO \u2550\u2550\u2550 -->\r\n <div class=\"screen\" id=\"s-pago\" style=\"background:var(--bg);\">\r\n <div class=\"nav\" style=\"flex-direction:column;align-items:stretch;padding-bottom:14px;\">\r\n <div style=\"display:flex;align-items:center;position:relative;margin-bottom:12px;\">\r\n <button class=\"back-btn\" onclick=\"goTo('s-prepago')\"><svg width=\"17\" height=\"17\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--text)\" stroke-width=\"2.5\"><path d=\"M19 12H5M12 5l-7 7 7 7\"\/><\/svg><\/button>\r\n <span class=\"nav-title\">M\u00e9todo de pago<\/span>\r\n <\/div>\r\n <div class=\"pago-tabs\">\r\n <button class=\"pago-tab active\" id=\"tab-card\" onclick=\"switchTab('card')\">Tarjeta<\/button>\r\n <button class=\"pago-tab\" id=\"tab-clabe\" onclick=\"switchTab('clabe')\">CLABE<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"pago-body\">\r\n <div id=\"panel-card\">\r\n <div class=\"visual-card\">\r\n <div class=\"vc-circle\" style=\"width:150px;height:150px;top:-50px;right:-40px;\"><\/div>\r\n <div class=\"vc-circle\" style=\"width:80px;height:80px;bottom:-30px;left:10px;\"><\/div>\r\n <div class=\"vc-logo\"><svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" fill=\"var(--accent)\" stroke=\"var(--accent)\" stroke-width=\"1.2\" stroke-linejoin=\"round\"\/><\/svg>CFE Pay<\/div>\r\n <div class=\"vc-chip\"><\/div>\r\n <p class=\"vc-num\">\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 4521<\/p>\r\n <p class=\"vc-name\">JUAN P\u00c9REZ L\u00d3PEZ<\/p>\r\n <div class=\"vc-circles\"><div class=\"vc-c vc-c1\"><\/div><div class=\"vc-c vc-c2\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"input-grp\"><p class=\"input-lbl\">N\u00famero de tarjeta<\/p><input class=\"inp\" type=\"text\" value=\"4521 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 4521\" readonly><\/div>\r\n <div class=\"input-row\">\r\n <div class=\"input-grp\"><p class=\"input-lbl\">Vencimiento<\/p><input class=\"inp\" type=\"text\" value=\"12 \/ 28\" readonly><\/div>\r\n <div class=\"input-grp\"><p class=\"input-lbl\">CVV<\/p><input class=\"inp\" type=\"password\" value=\"123\" maxlength=\"3\"><\/div>\r\n <\/div>\r\n <div class=\"input-grp\"><p class=\"input-lbl\">Nombre en tarjeta<\/p><input class=\"inp\" type=\"text\" value=\"JUAN P\u00c9REZ L\u00d3PEZ\" readonly><\/div>\r\n <\/div>\r\n <div id=\"panel-clabe\" style=\"display:none;\">\r\n <div class=\"input-grp\"><p class=\"input-lbl\">CLABE interbancaria<\/p><div class=\"input-copy-wrap\"><input class=\"inp\" type=\"text\" value=\"002180700558685671\" readonly><button class=\"copy-btn\" onclick=\"copyText('002180700558685671')\"><svg width=\"13\" height=\"13\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"3\"\/><path d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\"\/><\/svg><\/button><\/div><\/div>\r\n <div class=\"input-grp\"><p class=\"input-lbl\">Banco<\/p><div class=\"input-copy-wrap\"><input class=\"inp\" type=\"text\" value=\"BBVA M\u00e9xico\" readonly><button class=\"copy-btn\" onclick=\"copyText('BBVA M\u00e9xico')\"><svg width=\"13\" height=\"13\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"3\"\/><path d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\"\/><\/svg><\/button><\/div><\/div>\r\n <div class=\"input-grp\"><p class=\"input-lbl\">Titular<\/p><div class=\"input-copy-wrap\"><input class=\"inp\" type=\"text\" value=\"Juan P\u00e9rez L\u00f3pez\" readonly><button class=\"copy-btn\" onclick=\"copyText('Juan P\u00e9rez L\u00f3pez')\"><svg width=\"13\" height=\"13\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"3\"\/><path d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\"\/><\/svg><\/button><\/div><\/div>\r\n <div class=\"input-grp\"><p class=\"input-lbl\">Concepto \/ Referencia<\/p><div class=\"input-copy-wrap\"><input class=\"inp\" type=\"text\" value=\"0234-5678-9012\" readonly><button class=\"copy-btn\" onclick=\"copyText('0234-5678-9012')\"><svg width=\"13\" height=\"13\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"3\"\/><path d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\"\/><\/svg><\/button><\/div><\/div>\r\n <div class=\"clabe-note\"><svg width=\"13\" height=\"13\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#e59400\" stroke-width=\"2.5\" style=\"flex-shrink:0;margin-top:1px;\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 8v4l2 2\"\/><\/svg><p class=\"cn-text\">El pago puede tardar hasta 24 hrs en procesarse<\/p><\/div>\r\n <\/div>\r\n <div style=\"height:16px;\"><\/div>\r\n <\/div>\r\n <div class=\"pad\"><button class=\"btn-cta\" onclick=\"goTo('s-valid')\">Pagar $500.00<\/button><\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550 PROCESANDO \u2550\u2550\u2550 -->\r\n <div class=\"screen\" id=\"s-valid\">\r\n <div class=\"valid-body\">\r\n <div class=\"spinner\"><\/div>\r\n <p class=\"valid-title\">Procesando<br>tu pago<\/p>\r\n <p class=\"valid-sub\">Solo unos segundos<\/p>\r\n <div class=\"vsteps\">\r\n <div class=\"vstep\"><div class=\"vstep-ico\"><svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\" width=\"14\" height=\"14\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"3\"\/><path d=\"M7 11V7a5 5 0 0110 0v4\"\/><\/svg><\/div><p class=\"vstep-text\">Validando tarjeta<\/p><\/div>\r\n <div class=\"vstep\"><div class=\"vstep-ico\"><svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\" width=\"14\" height=\"14\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg><\/div><p class=\"vstep-text\">Verificando con CFE<\/p><\/div>\r\n <div class=\"vstep\"><div class=\"vstep-ico\"><svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\" width=\"14\" height=\"14\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg><\/div><p class=\"vstep-text\">Confirmando pago<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u2550\u2550\u2550 APROBADO \u2550\u2550\u2550 -->\r\n <div class=\"screen\" id=\"s-aprobado\">\r\n <div class=\"confetti-layer\" id=\"confetti\"><\/div>\r\n <div class=\"ap-body\">\r\n <div class=\"ap-check\"><svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"2.5\" width=\"40\" height=\"40\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg><\/div>\r\n <p class=\"ap-title\">\u00a1Pago exitoso!<\/p>\r\n <p class=\"ap-amount\">$500.00<\/p>\r\n <div class=\"ap-tag\"><div class=\"sdot\"><\/div>Servicio al corriente<\/div>\r\n <div class=\"ap-details\">\r\n <div class=\"ap-det-row\"><span class=\"ap-dl\">Folio<\/span><span class=\"ap-dr\">CFE-2026-043817<\/span><\/div>\r\n <div class=\"ap-det-row\"><span class=\"ap-dl\">Fecha y hora<\/span><span class=\"ap-dr\">20 mayo 2026 \u00b7 10:34 AM<\/span><\/div>\r\n <div class=\"ap-det-row\"><span class=\"ap-dl\">M\u00e9todo<\/span><span class=\"ap-dr\">Visa \u2022\u2022\u2022\u2022 4521<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"pad\" style=\"position:relative;z-index:1;\">\r\n <button class=\"btn-cta\" onclick=\"goTo('s-home-ok')\">Ir al inicio<\/button>\r\n <button class=\"btn-ghost-dk\">Descargar comprobante<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div><!-- \/phone -->\r\n <div class=\"copy-toast\" id=\"copy-toast\">Copiado \u2713<\/div>\r\n\r\n <script>\r\n \/\/ \u2500\u2500 LOADER \u2500\u2500\r\n (function() {\r\n const bar = document.getElementById('loader-bar');\r\n const loader = document.getElementById('s-loader');\r\n let progress = 0;\r\n \/\/ Fast: ~1.8s total to reach 100%\r\n const steps = [\r\n { target: 35, delay: 18 },\r\n { target: 60, delay: 14 },\r\n { target: 80, delay: 20 },\r\n { target: 95, delay: 28 },\r\n { target: 100, delay: 12 }\r\n ];\r\n let stepIdx = 0;\r\n function tick() {\r\n if (stepIdx >= steps.length) return;\r\n const { target, delay } = steps[stepIdx];\r\n if (progress < target) {\r\n progress += 1;\r\n bar.style.width = progress + '%';\r\n setTimeout(tick, delay);\r\n } else {\r\n stepIdx++;\r\n if (stepIdx < steps.length) setTimeout(tick, 80);\r\n else {\r\n setTimeout(() => {\r\n loader.classList.add('fade-out');\r\n setTimeout(() => {\r\n loader.style.display = 'none';\r\n document.getElementById('s-home').classList.add('active');\r\n }, 460);\r\n }, 200);\r\n }\r\n }\r\n }\r\n setTimeout(tick, 400);\r\n })();\r\n\r\n \/\/ \u2500\u2500 SCREENS \u2500\u2500\r\n let cur = 's-home';\r\n function goTo(id) {\r\n const from = document.getElementById(cur);\r\n const to = document.getElementById(id);\r\n if (!from || !to || cur === id) return;\r\n from.classList.remove('active');\r\n from.classList.add('exit');\r\n setTimeout(() => from.classList.remove('exit'), 240);\r\n to.classList.add('active');\r\n cur = id;\r\n if (id === 's-valid') startValidation();\r\n if (id === 's-aprobado') launchConfetti();\r\n }\r\n function copyText(text) {\r\n navigator.clipboard && navigator.clipboard.writeText(text).catch(() => {});\r\n const t = document.getElementById('copy-toast');\r\n t.classList.add('show');\r\n setTimeout(() => t.classList.remove('show'), 1800);\r\n }\r\n function switchTab(t) {\r\n document.getElementById('tab-card').classList.toggle('active', t === 'card');\r\n document.getElementById('tab-clabe').classList.toggle('active', t === 'clabe');\r\n document.getElementById('panel-card').style.display = t === 'card' ? '' : 'none';\r\n document.getElementById('panel-clabe').style.display = t === 'clabe' ? '' : 'none';\r\n }\r\n function startValidation() {\r\n document.querySelectorAll('.vstep').forEach(s => { s.style.animation = 'none'; s.offsetHeight; s.style.animation = ''; });\r\n setTimeout(() => goTo('s-aprobado'), 3400);\r\n }\r\n function launchConfetti() {\r\n const c = document.getElementById('confetti');\r\n c.innerHTML = '';\r\n const cols = ['#27c360','#fff','#a0f0c0','#7eedb0','#25d366'];\r\n for (let i = 0; i < 52; i++) {\r\n const d = document.createElement('div');\r\n const sz = 4 + Math.random() * 9;\r\n d.style.cssText = `position:absolute;left:${Math.random()*100}%;top:-10px;width:${sz}px;height:${sz}px;background:${cols[Math.floor(Math.random()*cols.length)]};border-radius:${Math.random()>.5?'50%':'2px'};animation:fall ${1.2+Math.random()*1.3}s ${Math.random()*.8}s forwards;`;\r\n c.appendChild(d);\r\n }\r\n }\r\n const st = document.createElement('style');\r\n st.textContent = `@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(120vh) rotate(400deg);opacity:0}}`;\r\n document.head.appendChild(st);\r\n <\/script>\r\n<\/div>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>CFE \u00b7 Pago de Recibo Comisi\u00f3n Federal de Electricidad Mi recibo CFE 0234-5678-9012 Activo Recibo pendiente \u00b7 Ene \u2013 Feb 2026 Tienes un pagopendiente Folio CFE-2026-043817 \u00b7 Dom\u00e9stica 1C Vence el 25 mayo 2026 \u00b7 quedan 5 d\u00edas $500.00 Pagar ahora Tarifa Dom\u00e9stica 1C Calle Reforma #123, Col. Centro MedidorB364436 ConceptokWh$\/kWhImporte B\u00e1sico1500.793$118.95 Intermedio850.950$80.75 Excedente132.802$36.43 Total […]<\/p>","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2502","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/pages\/2502","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/comments?post=2502"}],"version-history":[{"count":19,"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/pages\/2502\/revisions"}],"predecessor-version":[{"id":2528,"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/pages\/2502\/revisions\/2528"}],"wp:attachment":[{"href":"https:\/\/maanyuba.com\/en\/wp-json\/wp\/v2\/media?parent=2502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}