/* ===== Scope total: todo cuelga de .cbcg-cfg para no chocar con Divi ===== */ .cbcg-cfg,.cbcg-cfg *{box-sizing:border-box} .cbcg-cfg{ --accent:#f2b705; /* dorado del botón / acentos CBCG */ --ink:#0b1220; --muted:#64748b; --line:#e5e7eb; --panel:#ffffff; --bg:#f8fafc; --focus:#2563eb; --radius:16px; --shadow:0 10px 30px rgba(2,8,23,.12); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); line-height:1.4; -webkit-font-smoothing:antialiased; display:grid; grid-template-columns:230px minmax(300px,1fr) 360px 240px; gap:18px; align-items:start; } @media(max-width:1180px){ .cbcg-cfg{grid-template-columns:1fr 1fr} .cbcg-cfg .cbcg-stage{justify-content:flex-start} .cbcg-cfg .cbcg-belowcard{position:static;padding-top:0;margin-top:14px} } @media(max-width:640px){ .cbcg-cfg{grid-template-columns:1fr} } /* Portal (modal/toast reparentados a ): anula el grid del scope */ .cbcg-cfg.cbcg-portal{display:block;position:static;margin:0;padding:0} /* Sin panel de programa: 3 columnas + ocultar la columna de programa */ .cbcg-cfg.cbcg-noprogram{grid-template-columns:230px minmax(300px,1fr) 360px} .cbcg-cfg.cbcg-noprogram .cbcg-program{display:none} /* Modo estático (no interactivo): oculta los paneles de control, deja tarjeta + wallet */ .cbcg-cfg.cbcg-static{grid-template-columns:minmax(300px,1fr) 360px;justify-content:center} .cbcg-cfg.cbcg-static > .cbcg-panel{display:none} @media(max-width:1180px){ .cbcg-cfg.cbcg-noprogram,.cbcg-cfg.cbcg-static{grid-template-columns:1fr 1fr} } @media(max-width:640px){ .cbcg-cfg.cbcg-noprogram,.cbcg-cfg.cbcg-static{grid-template-columns:1fr} } .cbcg-cfg .cbcg-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px} .cbcg-cfg h3{margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:.2px;color:var(--ink)} .cbcg-cfg .cbcg-label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:16px 0 8px} .cbcg-cfg .cbcg-label:first-of-type{margin-top:0} /* Foco visible unificado (sobrevive a resets de outline del tema) */ .cbcg-cfg :focus-visible{outline:2px solid var(--focus);outline-offset:2px} .cbcg-cfg .cbcg-switch:focus-visible{outline-offset:3px} /* ---- Logo uploader ---- */ .cbcg-cfg .cbcg-logo-box{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px} .cbcg-cfg .cbcg-logo-thumb{width:34px;height:34px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto} .cbcg-cfg .cbcg-logo-thumb img{width:100%;height:100%;object-fit:contain} .cbcg-cfg .cbcg-name-input{border:none;background:transparent;font-size:13px;font-weight:600;color:var(--ink);width:100%;padding:2px 0;outline:none;border-radius:4px} .cbcg-cfg .cbcg-name-input:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .cbcg-cfg .cbcg-linkbtn{background:none;border:none;color:#2563eb;font-size:12px;font-weight:600;cursor:pointer;padding:6px 2px 0;display:inline-block;border-radius:4px} .cbcg-cfg .cbcg-linkbtn:hover{text-decoration:underline} .cbcg-cfg .cbcg-logo-hint{font-size:11px;color:var(--muted);margin-top:4px} /* ---- Swatches ---- */ .cbcg-cfg .cbcg-swatches{display:flex;gap:10px;flex-wrap:wrap} .cbcg-cfg .cbcg-swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)} .cbcg-cfg .cbcg-swatch[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px #fff inset, 0 0 0 1px rgba(0,0,0,.1)} /* ---- Segmented ---- */ .cbcg-cfg .cbcg-seg{display:flex;gap:6px} .cbcg-cfg .cbcg-seg button{flex:1;border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 6px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px} .cbcg-cfg .cbcg-seg button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);box-shadow:0 1px 2px rgba(2,8,23,.08)} .cbcg-cfg .cbcg-seg .cbcg-radio{width:12px;height:12px;border-radius:50%;border:1.5px solid #cbd5e1;flex:0 0 auto} .cbcg-cfg .cbcg-seg button[aria-pressed="true"] .cbcg-radio{border-color:var(--ink);background:radial-gradient(circle at center,var(--ink) 0 4px,transparent 5px)} /* ---- Preview central ---- */ .cbcg-cfg .cbcg-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:4px 0;align-self:stretch} .cbcg-cfg .cbcg-cardblock{position:relative;width:100%;max-width:var(--cbcg-card-max,440px);margin:0 auto} .cbcg-cfg .cbcg-cardwrap{width:100%;perspective:1400px} .cbcg-cfg .cbcg-belowcard{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:14px} .cbcg-cfg .cbcg-card3d{position:relative;width:100%;aspect-ratio:1.586/1;transition:transform .55s cubic-bezier(.2,.7,.2,1)} .cbcg-cfg .cbcg-card3d.is-angle{transform:rotateY(-22deg) rotateX(6deg)} .cbcg-cfg .cbcg-card3d svg{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;box-shadow:var(--shadow);display:block} .cbcg-cfg .cbcg-face{opacity:0;pointer-events:none;transition:opacity .35s} .cbcg-cfg .cbcg-face.is-on{opacity:1;pointer-events:auto} .cbcg-cfg .cbcg-carousel{display:flex;align-items:center;gap:16px;justify-content:center} .cbcg-cfg .cbcg-arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:16px;color:var(--ink);display:flex;align-items:center;justify-content:center} .cbcg-cfg .cbcg-arrow:hover{background:#f8fafc} .cbcg-cfg .cbcg-dots{display:flex;gap:7px} .cbcg-cfg .cbcg-dot{width:8px;height:8px;border-radius:50%;background:#cbd5e1;border:none;padding:0;cursor:pointer} .cbcg-cfg .cbcg-dot[aria-current="true"]{background:var(--ink);width:22px;border-radius:5px} .cbcg-cfg .cbcg-viewname{font-size:12px;color:var(--muted);min-width:64px;text-align:center} /* ---- Wallet ---- */ .cbcg-cfg .cbcg-wallet{align-self:stretch;display:flex;flex-direction:column;justify-content:center} .cbcg-cfg .cbcg-wallet-h{font-size:12px;color:var(--muted);text-align:center;margin-bottom:10px} .cbcg-cfg .cbcg-phone{width:var(--cbcg-phone-w,322px);margin:0 auto;background:#0b1220;border-radius:50px;padding:15px;box-shadow:var(--shadow)} .cbcg-cfg .cbcg-screen{background:#f5f6f8;border-radius:37px;overflow:hidden;padding:24px 20px 30px;position:relative} .cbcg-cfg .cbcg-statusbar{display:flex;justify-content:space-between;font-size:14px;font-weight:600;color:#0b1220;padding:2px 6px 20px} .cbcg-cfg .cbcg-wallet-card{border-radius:12px;overflow:hidden;box-shadow:0 6px 16px rgba(2,8,23,.18)} .cbcg-cfg .cbcg-wallet-card svg{display:block;width:100%;height:auto} .cbcg-cfg .cbcg-check{width:52px;height:52px;border-radius:50%;background:#e6f0ff;color:#2563eb;display:flex;align-items:center;justify-content:center;margin:28px auto 10px} .cbcg-cfg .cbcg-ready{text-align:center;font-size:16px;font-weight:700;color:#0b1220} .cbcg-cfg .cbcg-ready small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:4px} .cbcg-cfg .cbcg-addwallet{font-size:13.5px;color:var(--muted);margin:28px 2px 12px} .cbcg-cfg .cbcg-pays{display:flex;gap:9px} .cbcg-cfg .cbcg-pay{flex:1;background:#0b1220;color:#fff;border-radius:11px;font-size:14.5px;font-weight:600;padding:15px 4px;text-align:center} /* ---- Config programa ---- */ .cbcg-cfg .cbcg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)} .cbcg-cfg .cbcg-row:last-of-type{border-bottom:none} .cbcg-cfg .cbcg-row-t{font-size:13px;color:var(--ink)} .cbcg-cfg .cbcg-switch{--w:40px;--h:22px;position:relative;width:var(--w);height:var(--h);border-radius:999px;border:none;background:#cbd5e1;cursor:pointer;padding:0;flex:0 0 auto;transition:background .2s} .cbcg-cfg .cbcg-switch[aria-checked="true"]{background:#2563eb} .cbcg-cfg .cbcg-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .2s} .cbcg-cfg .cbcg-switch[aria-checked="true"]::after{left:20px} .cbcg-cfg .cbcg-expand{background:none;border:none;cursor:pointer;color:var(--muted);font-size:16px;display:flex;align-items:center;border-radius:6px} .cbcg-cfg .cbcg-expand svg{transition:transform .2s} .cbcg-cfg .cbcg-row.is-open .cbcg-expand svg{transform:rotate(90deg)} .cbcg-cfg .cbcg-sub{display:none;padding:2px 0 12px} .cbcg-cfg .cbcg-sub.is-open{display:block} .cbcg-cfg .cbcg-field{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0} .cbcg-cfg .cbcg-field label{font-size:12px;color:var(--muted)} .cbcg-cfg .cbcg-field input[type="number"]{width:96px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px} .cbcg-cfg .cbcg-chk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);margin:7px 0;cursor:pointer} .cbcg-cfg .cbcg-chk input{width:15px;height:15px;accent-color:#2563eb} .cbcg-cfg .cbcg-save{width:100%;margin-top:16px;background:var(--accent);color:#111;border:none;border-radius:10px;padding:13px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px rgba(242,183,5,.35)} .cbcg-cfg .cbcg-save:hover{filter:brightness(.97)} .cbcg-cfg .cbcg-save[disabled]{opacity:.6;cursor:default} /* ---- Modal / toast ---- */ .cbcg-cfg .cbcg-modal{position:fixed;inset:0;background:rgba(2,8,23,.55);display:none;align-items:center;justify-content:center;z-index:99999;padding:20px} .cbcg-cfg .cbcg-modal.is-open{display:flex} .cbcg-cfg .cbcg-modal-card{background:#fff;border-radius:14px;max-width:560px;width:100%;max-height:80vh;overflow:auto;padding:22px} .cbcg-cfg .cbcg-modal-card h4{margin:0 0 6px;font-size:16px} .cbcg-cfg .cbcg-modal-card p{margin:0 0 12px;font-size:13px;color:var(--muted)} .cbcg-cfg .cbcg-json{background:#0b1220;color:#e2e8f0;border-radius:10px;padding:12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;white-space:pre-wrap;word-break:break-word;max-height:340px;overflow:auto} .cbcg-cfg .cbcg-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px} .cbcg-cfg .cbcg-btn2{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer} .cbcg-cfg .cbcg-btn2.primary{background:var(--accent);border-color:var(--accent)} .cbcg-cfg .cbcg-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#0b1220;color:#fff;padding:11px 18px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:99999} .cbcg-cfg .cbcg-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}