.cpfl {
  --cpfl-bg: #0d1020;
  --cpfl-card: rgba(20, 24, 42, .92);
  --cpfl-card-soft: rgba(255,255,255,.045);
  --cpfl-border: rgba(255,255,255,.11);
  --cpfl-text: #f7f8ff;
  --cpfl-muted: #aeb4c9;
  --cpfl-purple: #7c4dff;
  --cpfl-purple-2: #9b5cff;
  --cpfl-cyan: #22d3ee;
  --cpfl-yellow: #ffe455;
  --cpfl-green: #35d07f;
  --cpfl-red: #ff5f78;
  position: relative;
  overflow: hidden;
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid var(--cpfl-border);
  border-radius: 26px;
  background:
    radial-gradient(circle at 10% 0%, rgba(124,77,255,.18), transparent 38%),
    radial-gradient(circle at 100% 40%, rgba(34,211,238,.09), transparent 36%),
    var(--cpfl-bg);
  color: var(--cpfl-text);
  box-shadow: 0 25px 80px rgba(0,0,0,.32);
  font-family: inherit;
}

.cpfl *, .cpfl *::before, .cpfl *::after { box-sizing: border-box; }
.cpfl__glow { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; opacity:.35; }
.cpfl__glow--one { width:220px;height:220px;left:-120px;top:180px;background:#7c4dff; }
.cpfl__glow--two { width:180px;height:180px;right:-100px;bottom:80px;background:#22d3ee; }

.cpfl__header { position:relative; z-index:1; margin-bottom:24px; }
.cpfl__eyebrow { display:inline-flex; align-items:center; gap:7px; margin-bottom:9px; color:var(--cpfl-cyan); font-size:.76rem; font-weight:900; letter-spacing:.12em; }
.cpfl h2, .cpfl h3 { color:var(--cpfl-text); margin:0; }
.cpfl h2 { font-size:clamp(1.9rem,4vw,3.15rem); line-height:1; letter-spacing:-.045em; }
.cpfl h3 { font-size:clamp(1.35rem,3vw,2rem); line-height:1.1; }
.cpfl p { color:var(--cpfl-muted); line-height:1.65; }
.cpfl__header p { max-width:720px; margin:14px 0 0; }

.cpfl__panel { position:relative; z-index:1; padding:22px; border:1px solid var(--cpfl-border); border-radius:20px; background:var(--cpfl-card); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.cpfl__panel--success { text-align:center; }
.cpfl__panel--locked { text-align:center; }
.cpfl__step { display:flex; align-items:center; gap:12px; margin-bottom:20px; text-align:left; }
.cpfl__step > span { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,var(--cpfl-purple),var(--cpfl-purple-2)); color:#fff; font-weight:900; box-shadow:0 8px 24px rgba(124,77,255,.28); }
.cpfl__step strong, .cpfl__step small { display:block; }
.cpfl__step small { margin-top:2px; color:var(--cpfl-muted); }

.cpfl__form { display:grid; gap:14px; text-align:left; }
.cpfl__form label:not(.cpfl__check) { color:#eef0ff; font-size:.9rem; font-weight:800; }
.cpfl__form input[type="text"] { width:100%; min-height:52px; padding:0 15px; border:1px solid rgba(255,255,255,.13); border-radius:13px; outline:none; background:#15192b; color:#fff; font:inherit; box-shadow:none; }
.cpfl__form input[type="text"]::placeholder { color:#6f7692; }
.cpfl__form input[type="text"]:focus { border-color:rgba(155,92,255,.9); box-shadow:0 0 0 4px rgba(124,77,255,.15); }
.cpfl__form.is-busy { opacity:.72; pointer-events:none; }

.cpfl__check { display:flex; align-items:flex-start; gap:11px; padding:13px 14px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(255,255,255,.035); color:var(--cpfl-muted); line-height:1.45; cursor:pointer; }
.cpfl__check input { appearance:none; -webkit-appearance:none; flex:0 0 20px; width:20px!important; height:20px!important; min-width:20px!important; margin:1px 0 0!important; border:1px solid rgba(255,255,255,.25)!important; border-radius:6px!important; background:#111528!important; display:grid; place-items:center; }
.cpfl__check input:checked { border-color:var(--cpfl-purple)!important; background:var(--cpfl-purple)!important; }
.cpfl__check input:checked::after { content:"✓"; color:#fff; font-size:13px; font-weight:900; line-height:1; }
.cpfl__check strong { color:#fff; }

.cpfl__btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 18px; border:1px solid transparent; border-radius:13px; font:inherit; font-size:.92rem; font-weight:900; text-decoration:none!important; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.cpfl__btn:hover { transform:translateY(-1px); }
.cpfl__btn:disabled { cursor:wait; transform:none; }
.cpfl__btn--primary { background:linear-gradient(135deg,var(--cpfl-purple),var(--cpfl-purple-2)); color:#fff!important; box-shadow:0 10px 28px rgba(124,77,255,.26); }
.cpfl__btn--ghost { background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.11); color:#e5e7f4!important; }
.cpfl__btn--support { background:rgba(34,211,238,.08); border-color:rgba(34,211,238,.25); color:#8feaf7!important; }
.cpfl__btn--success { background:linear-gradient(135deg,#28b76e,#35d07f); color:#06170f!important; box-shadow:0 10px 28px rgba(53,208,127,.18); }
.cpfl__btn--danger { background:rgba(255,95,120,.12); border-color:rgba(255,95,120,.35); color:#ffb5c0!important; }

.cpfl__actions { display:flex; flex-wrap:wrap; gap:10px; }
.cpfl__actions .cpfl__btn { flex:1 1 190px; }
.cpfl__actions--secondary { justify-content:center; margin-top:14px; }

.cpfl__identity-card { display:grid; gap:5px; padding:18px; margin:0 0 18px; border:1px solid rgba(124,77,255,.26); border-radius:17px; background:linear-gradient(135deg,rgba(124,77,255,.13),rgba(34,211,238,.05)); text-align:center; }
.cpfl__identity-card span, .cpfl__identity-card small { color:var(--cpfl-muted); }
.cpfl__identity-card strong { color:#fff; font-size:clamp(1.4rem,3vw,2rem); word-break:break-word; }
.cpfl__identity-card b { color:var(--cpfl-yellow); }
.cpfl__identity-card--small { max-width:430px; margin:18px auto; }

.cpfl__success-icon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 14px; border-radius:18px; background:rgba(53,208,127,.12); border:1px solid rgba(53,208,127,.3); color:var(--cpfl-green); font-size:1.8rem; font-weight:900; }
.cpfl__username-big { margin:12px 0 8px; color:#fff; font-size:clamp(1.6rem,4vw,2.65rem); font-weight:950; line-height:1; letter-spacing:-.035em; word-break:break-word; }
.cpfl__sender { margin:10px 0 4px!important; }
.cpfl__sender strong { color:var(--cpfl-yellow); }
.cpfl__time { display:block; color:#7f87a3; margin-top:5px; }

.cpfl__confirm-box { max-width:620px; margin:22px auto 0; padding:18px; border:1px solid rgba(255,255,255,.09); border-radius:17px; background:rgba(255,255,255,.035); }
.cpfl__confirm-box > strong { color:#fff; font-size:1.05rem; }
.cpfl__confirm-box p { margin:5px 0 14px; }

.cpfl__security-note { position:relative; z-index:1; display:flex; gap:12px; align-items:flex-start; margin-top:18px; padding:15px 16px; border-radius:15px; background:rgba(255,228,85,.055); border:1px solid rgba(255,228,85,.14); }
.cpfl__security-note strong { color:#fff; }
.cpfl__security-note p { margin:3px 0 0; font-size:.88rem; }

.cpfl__notice { position:relative; z-index:5; margin:0 0 16px; padding:13px 15px; border-radius:13px; font-weight:750; }
.cpfl__notice--error { background:rgba(255,95,120,.11); border:1px solid rgba(255,95,120,.3); color:#ffc0ca; }
.cpfl__notice--success { background:rgba(53,208,127,.1); border:1px solid rgba(53,208,127,.3); color:#b7f4d3; }

.cpfl__modal[hidden] { display:none!important; }
.cpfl__modal { position:fixed; inset:0; z-index:999999; display:grid; place-items:center; padding:18px; background:rgba(4,6,14,.76); backdrop-filter:blur(8px); }
.cpfl__modal-card { position:relative; width:min(100%,560px); padding:24px; border:1px solid rgba(255,255,255,.12); border-radius:22px; background:#111526; box-shadow:0 30px 100px rgba(0,0,0,.55); color:#fff; }
.cpfl__modal-card > p { margin:10px 0 18px; }
.cpfl__modal-close { position:absolute; top:12px; right:12px; width:38px; height:38px; border:1px solid rgba(255,255,255,.1); border-radius:11px; background:rgba(255,255,255,.04); color:#fff; font-size:24px; line-height:1; cursor:pointer; }
.cpfl-modal-open { overflow:hidden; }

.cpfl--login { max-width:760px; }
.cpfl__login-card { position:relative; z-index:1; max-width:620px; margin:0 auto; text-align:center; }
.cpfl__login-card h2 { margin-top:4px; }
.cpfl__login-card p { margin:14px 0 20px; }
.cpfl__lock-icon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 12px; border-radius:18px; background:rgba(124,77,255,.12); border:1px solid rgba(124,77,255,.3); font-size:1.55rem; }

@media (max-width: 640px) {
  .cpfl { padding:18px; border-radius:20px; }
  .cpfl__panel { padding:17px; border-radius:17px; }
  .cpfl__actions { flex-direction:column; }
  .cpfl__actions .cpfl__btn { flex:1 1 auto; width:100%; }
  .cpfl__btn { width:100%; }
  .cpfl__security-note { align-items:flex-start; }
}

/* v1.2.0 · múltiples cuentas emisoras */
.cpfl__sender-box { margin:0 0 18px; padding:15px; border:1px solid rgba(34,211,238,.18); border-radius:15px; background:rgba(34,211,238,.045); text-align:left; }
.cpfl__sender-box-title { display:block; margin-bottom:10px; color:var(--cpfl-muted); font-size:.82rem; font-weight:850; }
.cpfl__sender-list { display:flex; flex-wrap:wrap; gap:9px; }
.cpfl__sender-list--centered { justify-content:center; margin:16px auto; }
.cpfl__sender-pill { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:6px 12px; border:1px solid rgba(255,228,85,.22); border-radius:999px; background:rgba(255,228,85,.075); color:var(--cpfl-yellow); font-size:.88rem; font-weight:900; word-break:break-word; }
.cpfl__sender-target { margin:18px 0 0!important; }
.cpfl__sender-statuses { display:grid; gap:8px; max-width:580px; margin:16px auto 0; text-align:left; }
.cpfl__sender-status { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.035); }
.cpfl__sender-status strong { color:#fff; word-break:break-word; }
.cpfl__sender-status span { color:var(--cpfl-green); font-size:.82rem; font-weight:850; text-align:right; }

@media (max-width: 640px) {
  .cpfl__sender-status { align-items:flex-start; flex-direction:column; gap:3px; }
  .cpfl__sender-status span { text-align:left; }
}

/* v1.2.1 · transición AJAX entre pasos sin recargar la página */
.cpfl[data-cpfl-state] .cpfl__panel {
  animation: cpfl-state-enter .22s ease-out;
}
@keyframes cpfl-state-enter {
  from { opacity: .45; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* v1.3.0 · espera de 48 horas y habilitación de regalos */
.cpfl__countdown-card {
  max-width:560px;
  margin:22px auto 18px;
  padding:20px;
  border:1px solid rgba(124,77,255,.28);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(124,77,255,.12),rgba(34,211,238,.055));
  text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.cpfl__countdown-label {
  display:block;
  margin-bottom:9px;
  color:var(--cpfl-muted);
  font-size:.82rem;
  font-weight:850;
  letter-spacing:.02em;
}
.cpfl__countdown {
  color:#fff;
  font-size:clamp(2.2rem,8vw,4.25rem);
  font-weight:950;
  line-height:1;
  letter-spacing:-.055em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 28px rgba(155,92,255,.22);
}
.cpfl__countdown-card small {
  display:block;
  margin-top:10px;
  color:#8991ad;
}
.cpfl__panel--ready {
  border-color:rgba(53,208,127,.25);
  background:
    radial-gradient(circle at 50% 0%, rgba(53,208,127,.08), transparent 38%),
    var(--cpfl-card);
}
.cpfl__success-icon--ready {
  width:66px;
  height:66px;
  font-size:2rem;
  background:rgba(53,208,127,.13);
  box-shadow:0 10px 35px rgba(53,208,127,.09);
}
.cpfl__ready-note {
  max-width:620px;
  margin:20px auto 0;
  padding:15px 17px;
  border:1px solid rgba(34,211,238,.18);
  border-radius:15px;
  background:rgba(34,211,238,.055);
  text-align:left;
}
.cpfl__ready-note strong { color:#fff; }
.cpfl__ready-note p { margin:4px 0 0; font-size:.9rem; }
.cpfl__modal-card--ready { text-align:center; overflow:hidden; }
.cpfl__ready-burst {
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  margin:0 auto 14px;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(53,208,127,.18),rgba(34,211,238,.12));
  border:1px solid rgba(53,208,127,.28);
  font-size:2.2rem;
}
.cpfl__modal-card--ready .cpfl__actions { margin-top:18px; }

@media (max-width:640px) {
  .cpfl__countdown-card { padding:17px 12px; }
  .cpfl__countdown { letter-spacing:-.04em; }
}