/* ═══════════════════════════════════════════════════════════════
   LOGIN · SLM Pay · Sala de control
   Brand panel + form panel · 2-stage credentials/approval flow
   Negro zinc + naranja brand · sans rounded · sin scroll Y desktop
   ═══════════════════════════════════════════════════════════════ */

:root {
	--bg:        #0F0F11;
	--bg-elev:   #18181B;
	--bg-tile:   #131316;
	--ink:       #F4F4F5;
	--ink-dim:   #A1A1AA;
	--muted:     #52525B;
	--border:    #27272A;
	--border-2:  #3F3F46;
	--accent:    #EA580C;
	--accent-l:  #FB923C;
	--accent-d:  #9A3412;
	--accent-2:  #FED7AA;
	--good:      #22C55E;
	--bad:       #EF4444;
	--warn:      #F59E0B;

	--font-sans:  "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", "Avenir Next", "Avenir", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-mono:  ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
	height: 100%;
	overflow: hidden;
}

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	font-size: 14px;
}

.ctl {
	display: grid;
	grid-template-columns: minmax(360px, 38%) 1fr;
	height: 100vh;
	overflow: hidden;
}

/* ─────────────────── LEFT BRAND ─────────────────── */

.ctl-brand {
	background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 80%);
	border-right: 1px solid var(--border);
	padding: 28px 36px 20px;
	display: flex;
	flex-direction: column;
	color: var(--ink);
	position: relative;
	overflow: hidden;
	height: 100%;
}

.ctl-brand::before {
	content: '';
	position: absolute;
	top: -260px; left: -180px;
	width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(234, 88, 12, 0.16) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}

.ctl-brand-arcs {
	position: absolute;
	right: 0; bottom: 0;
	width: clamp(420px, 42vw, 720px);
	height: clamp(420px, 42vw, 720px);
	pointer-events: none;
	color: var(--accent);
	z-index: 0;
	opacity: 0.55;
}

.ctl-brand-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	margin-bottom: 48px;
	position: relative;
	z-index: 1;
}

.ctl-mark {
	display: block;
	height: 22px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
}

.ctl-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--good);
	transition: color 240ms;
}

.ctl-status-dot {
	display: inline-block;
	width: 6px; height: 6px;
	background: var(--good);
	border-radius: 50%;
	box-shadow: 0 0 8px var(--good);
	animation: ctl-pulse 2s ease-in-out infinite;
	transition: background 240ms, box-shadow 240ms;
}

@keyframes ctl-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(0.8); }
}

/* Verifying state · status pill turns orange in stage 2 */
body.stage-approve-active .ctl-status { color: var(--accent); }
body.stage-approve-active .ctl-status-dot {
	background: var(--accent);
	box-shadow: 0 0 8px var(--accent);
}
body.stage-approve-active .ctl-status-text::after {
	content: ' · verificando';
	color: var(--accent);
	opacity: 0.7;
}

/* ─── Hero · stage-aware swap ─── */

.ctl-hero {
	margin-bottom: auto;
	position: relative;
	z-index: 1;
}

.ctl-hero-approve { display: none; }
body.stage-approve-active .ctl-hero-creds   { display: none; }
body.stage-approve-active .ctl-hero-approve { display: block; }

.ctl-hero-eyebrow {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--accent);
	margin-bottom: 18px;
}

.ctl-hero-h1 {
	font-family: var(--font-sans);
	font-size: clamp(34px, 4.4vw, 60px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin-bottom: 18px;
}

.ctl-hero-h1-sm {
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.1;
}

.ctl-hero-h1 em {
	font-style: normal;
	color: var(--accent);
}

.ctl-hero-sub {
	font-size: 13px;
	color: var(--ink-dim);
	letter-spacing: 0;
	line-height: 1.5;
	max-width: 32ch;
}

/* Vault badge · in brand-foot (stage 1 only) */
.ctl-vault {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 0 16px;
	border-top: 1px solid var(--border);
	color: var(--ink-dim);
	margin-bottom: 14px;
	position: relative;
	z-index: 1;
}

/* Hide vault on stage 2 (approve has its own context card on the body) */
body.stage-approve-active .ctl-vault { display: none; }

.ctl-vault-shield {
	position: relative;
	width: 52px; height: 52px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
}

.ctl-vault-shield img {
	width: 44px; height: 44px;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 4px 16px rgba(234, 88, 12, 0.25));
	position: relative;
	z-index: 2;
}

.ctl-vault-orbit {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid var(--border);
	z-index: 1;
}
.ctl-vault-orbit::before, .ctl-vault-orbit::after {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 1px dashed var(--border);
	animation: ctl-spin 38s linear infinite;
}
.ctl-vault-orbit::after {
	inset: -16px;
	border-color: var(--accent);
	border-style: dashed;
	opacity: 0.4;
	animation-duration: 80s;
	animation-direction: reverse;
}

@keyframes ctl-spin { to { transform: rotate(360deg); } }

.ctl-vault-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--muted);
}

.ctl-vault-id {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--ink);
	letter-spacing: 0.06em;
}

/* Context card (stage 2) */
.ctl-context {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	margin: 28px 0 18px;
}

.ctl-ctx-row {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 16px;
	padding: 12px 0;
	align-items: baseline;
	border-bottom: 1px dashed var(--border);
	font-size: 13px;
}
.ctl-ctx-row:last-child { border-bottom: 0; }

.ctl-ctx-lbl {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.ctl-ctx-val {
	color: var(--ink);
	font-weight: 500;
}

.ctl-ctx-mono {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
}

/* Marquee */
.ctl-marquee {
	overflow: hidden;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--muted);
	mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	-webkit-mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	position: relative;
	z-index: 1;
}

.ctl-marquee-track {
	display: inline-flex;
	gap: 16px;
	white-space: nowrap;
	animation: ctl-marquee 28s linear infinite;
}

.ctl-marquee-track i { color: var(--accent); font-style: normal; }

@keyframes ctl-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ─────────────────── RIGHT · FORM PANEL ─────────────────── */

.ctl-form-panel {
	background: var(--bg-elev);
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
	overflow: hidden;
}

.ctl-form-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255,255,255,0.018) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
	mask: radial-gradient(ellipse at center, #000 30%, transparent 80%);
	-webkit-mask: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

/* Particles */
.ctl-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.ctl-particle {
	position: absolute;
	border-radius: 50%;
	background: var(--accent);
	pointer-events: none;
	will-change: transform, opacity;
	animation-name: ctl-particle-float;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes ctl-particle-float {
	0%   { transform: translateY(0) translateX(0);                              opacity: 0; }
	10%  { opacity: var(--peak, 0.7); }
	50%  { transform: translateY(-50vh) translateX(var(--drift, 12px)); }
	90%  { opacity: var(--peak, 0.7); }
	100% { transform: translateY(-100vh) translateX(0);                         opacity: 0; }
}

/* Form panel aurora */
.ctl-fp-aurora {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.ctl-blob-fp-1 {
	width: 520px; height: 520px;
	top: -200px; right: -160px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(234, 88, 12, 0.42) 0%, transparent 60%);
	filter: blur(90px);
	mix-blend-mode: screen;
	animation: ctl-blob-fp-1-drift 26s ease-in-out infinite;
	will-change: transform;
	position: absolute;
}

.ctl-blob-fp-2 {
	width: 480px; height: 480px;
	bottom: -200px; left: -120px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(154, 52, 18, 0.5) 0%, transparent 60%);
	filter: blur(80px);
	mix-blend-mode: screen;
	animation: ctl-blob-fp-2-drift 32s ease-in-out infinite;
	will-change: transform;
	position: absolute;
}

@keyframes ctl-blob-fp-1-drift {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(-100px, 80px); }
}

@keyframes ctl-blob-fp-2-drift {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(120px, -60px); }
}

/* Mobile-only mark */
.ctl-mobile-mark { display: none; }

/* Top register */
.ctl-fp-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px clamp(32px, 3.6vw, 56px);
	border-bottom: 1px solid var(--border);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

.ctl-fp-corner {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

/* Stage-aware corner sets · wrapper spans control visibility */
.ctl-fp-corner-set {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.ctl-fp-corner-approve { display: none; }
body.stage-approve-active .ctl-fp-corner-creds   { display: none; }
body.stage-approve-active .ctl-fp-corner-approve { display: inline-flex; }

.ctl-fp-tag { color: var(--accent); font-weight: 600; }

.ctl-fp-sep {
	display: inline-block;
	width: 18px; height: 1px;
	background: var(--border-2);
}

.ctl-fp-meta { color: var(--muted); }

.ctl-fp-time {
	color: var(--ink);
	font-family: var(--font-mono);
	font-feature-settings: "tnum" 1;
	font-size: 11px;
}

.ctl-fp-back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--accent);
	background: transparent;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	padding: 0;
	transition: color 180ms, transform 220ms cubic-bezier(.16,1,.3,1);
}
.ctl-fp-back-link:hover {
	color: var(--accent-l);
	transform: translateX(-3px);
}

/* Body */
.ctl-fp-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(24px, 3.5vh, 56px) clamp(32px, 3.6vw, 56px);
	max-width: 720px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	min-height: 0;
}

/* Stages · only one visible at a time */
.stage { display: none; flex-direction: column; }
.stage.on { display: flex; }
.stage[hidden] { display: none !important; }

/* Greet block */
.ctl-fp-greet {
	margin-bottom: clamp(20px, 3vh, 36px);
}

.ctl-fp-eyebrow {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--accent);
	margin-bottom: 16px;
}

.ctl-fp-h1 {
	font-family: var(--font-sans);
	font-size: clamp(40px, 5.4vh, 68px);
	line-height: 1.12;
	letter-spacing: -0.03em;
	font-weight: 800;
	margin-bottom: 16px;
	color: var(--ink);
}

.ctl-fp-h1 em {
	font-style: normal;
	color: var(--accent);
}

.ctl-fp-sub {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-dim);
	max-width: 44ch;
}

/* Banner */
.ctl-banner {
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 13px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.ctl-banner-warn {
	background: rgba(245, 158, 11, 0.08);
	border: 1px solid rgba(245, 158, 11, 0.3);
	color: var(--warn);
}
.ctl-banner-ok {
	background: rgba(34, 197, 94, 0.08);
	border: 1px solid rgba(34, 197, 94, 0.3);
	color: var(--good);
}
.ctl-banner span { color: var(--ink); }

/* ─── Form (stage 1) ─── */

.ctl-fp-form {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2.6vh, 26px);
}

.ctl-field {
	display: flex;
	flex-direction: column;
}

.ctl-field-label-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
}

.ctl-field label {
	display: block;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--ink-dim);
	margin-bottom: 8px;
}

.ctl-field-label-row label { margin-bottom: 0; }

.ctl-field input[type="email"],
.ctl-field input[type="password"],
.ctl-field input[type="text"] {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--border-2);
	color: var(--ink);
	font-family: inherit;
	font-size: 19px;
	padding: 10px 0 14px;
	transition: border-color 240ms cubic-bezier(.16,1,.3,1);
	letter-spacing: -0.005em;
}

.ctl-field input:focus {
	outline: none;
	border-bottom-color: var(--accent);
}

.ctl-field input::placeholder {
	color: var(--muted);
	font-family: var(--font-sans);
	font-style: normal;
}

.ctl-field-with-eye {
	position: relative;
}

.ctl-field-with-eye input { padding-right: 40px; }

.ctl-field-eye {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-25%);
	background: transparent;
	border: 0;
	padding: 8px;
	color: var(--muted);
	cursor: pointer;
	transition: color 180ms;
	display: inline-grid;
	place-items: center;
}
.ctl-field-eye > svg {
	grid-area: 1 / 1;
	transition: opacity 180ms ease, transform 180ms cubic-bezier(.16,1,.3,1);
}
/* Default · password hidden → mostrar ícono "ojo" (eye-on) */
.ctl-field-eye .eye-off { opacity: 0; transform: scale(0.85); }
/* aria-pressed=true · password visible → mostrar ícono "ojo tachado" (eye-off) */
.ctl-field-eye[aria-pressed="true"] .eye-on  { opacity: 0; transform: scale(0.85); }
.ctl-field-eye[aria-pressed="true"] .eye-off { opacity: 1; transform: scale(1); }
.ctl-field-eye[aria-pressed="true"] { color: var(--accent); }
.ctl-field-eye:hover { color: var(--ink-dim); }
.ctl-field-eye[aria-pressed="true"]:hover { color: var(--accent-l, #FB923C); }

.ctl-fp-link {
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: 0;
	color: var(--ink-dim);
	text-decoration: none;
	border-bottom: 1px dotted var(--border-2);
	padding-bottom: 1px;
	transition: color 180ms, border-color 180ms;
}
.ctl-fp-link:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* Form err */
.ctl-form-err {
	display: none;
	padding: 10px 14px;
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.3);
	border-radius: 8px;
	color: var(--bad);
	font-size: 13px;
	margin-top: -4px;
}
.ctl-form-err.on { display: block; }
.ctl-form-err .form-err-msg { color: var(--ink); }

/* Submit · primary */
.ctl-submit {
	background: var(--accent);
	color: #0F0F11;
	border: 0;
	padding: 18px 24px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	cursor: pointer;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px;
	margin-top: 12px;
	border-radius: 12px;
	transition: background 220ms, transform 220ms cubic-bezier(.16,1,.3,1), box-shadow 220ms;
	box-shadow: 0 0 0 0 rgba(234, 88, 12, 0);
	position: relative;
	overflow: hidden;
	text-align: left;
}

.ctl-submit::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
	transform: translateX(-100%);
	transition: transform 600ms cubic-bezier(.16,1,.3,1);
	pointer-events: none;
}

.ctl-submit:hover:not(:disabled) {
	background: var(--accent-l);
	box-shadow: 0 12px 32px -12px rgba(234, 88, 12, 0.7);
	transform: translateY(-2px);
}
.ctl-submit:hover:not(:disabled)::before { transform: translateX(100%); }

.ctl-submit:disabled { cursor: progress; opacity: 0.85; }

.ctl-submit-num {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	background: rgba(15, 15, 17, 0.16);
	padding: 4px 8px;
	border-radius: 6px;
}

.ctl-submit-txt { font-weight: 600; letter-spacing: 0; }

/* Single icon slot · arrow OR spin, never both visible */
.ctl-submit-icon {
	display: inline-grid;
	width: 22px;
	height: 16px;
	place-items: center;
}
.ctl-submit-icon > svg {
	grid-area: 1 / 1;
}
.ctl-submit-arrow { transition: transform 220ms cubic-bezier(.16,1,.3,1); }
.ctl-submit:hover:not(:disabled) .ctl-submit-arrow { transform: translateX(4px); }

.ctl-submit-spin {
	animation: ctl-spin 1s linear infinite;
}
.ctl-submit-spin[hidden] { display: none !important; }
.ctl-submit-arrow[hidden] { display: none !important; }

/* ─── Stage 2 · Approve ─── */

.ctl-ap-body { max-width: 720px; }

.ctl-ap-greet {
	margin-bottom: clamp(16px, 2.4vh, 28px);
}

.ctl-ap-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: center;
	margin-bottom: clamp(16px, 2.4vh, 28px);
}

.ctl-ap-stage {
	position: relative;
	display: grid;
	place-items: center;
	height: clamp(200px, 28vh, 260px);
	color: var(--accent);
}

.ctl-ap-pair-label {
	position: absolute;
	bottom: -8px;
	left: 0; right: 0;
	text-align: center;
	font-size: 11px;
	color: var(--muted);
	letter-spacing: 0.02em;
}

.ctl-ap-pulse {
	position: absolute;
	inset: 0;
	margin: auto;
	width: clamp(220px, 26vh, 300px);
	height: clamp(220px, 26vh, 300px);
	pointer-events: none;
}

.ctl-ap-ping {
	transform-origin: 180px 180px;
	animation: ctl-ap-ping-anim 2.6s cubic-bezier(.2, .65, .3, 1) infinite;
	will-change: r, opacity, stroke-width;
	opacity: 0;
}
.ctl-ap-ping-1 { animation-delay: 0s;    }
.ctl-ap-ping-2 { animation-delay: 0.85s; }
.ctl-ap-ping-3 { animation-delay: 1.7s;  }

@keyframes ctl-ap-ping-anim {
	0%   { r: 70;  opacity: 0;    stroke-width: 2; }
	10%  { opacity: 0.85; }
	60%  { opacity: 0.45; stroke-width: 1; }
	100% { r: 175; opacity: 0;    stroke-width: 0.4; }
}

.ctl-ap-phone {
	position: relative;
	z-index: 2;
	color: var(--accent);
	width: clamp(100px, 12vh, 140px);
	filter: drop-shadow(0 24px 48px rgba(234, 88, 12, 0.20));
}
.ctl-ap-phone svg { display: block; width: 100%; height: auto; }

.ctl-ap-bio {
	animation: ctl-ap-bio-glow 2.4s ease-in-out infinite;
	transform-box: fill-box;
}

@keyframes ctl-ap-bio-glow {
	0%, 100% { filter: drop-shadow(0 0 0 transparent); }
	50%      { filter: drop-shadow(0 0 6px var(--accent)); }
}

/* QR card · canvas dinámico */
.ctl-ap-qr-card {
	position: relative;
	display: grid;
	place-items: center;
	height: clamp(200px, 28vh, 260px);
}

.ctl-ap-qr-frame {
	position: relative;
	width: clamp(160px, 22vh, 220px);
	height: clamp(160px, 22vh, 220px);
	background: white;
	padding: 14px;
	border-radius: 12px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 24px 48px -16px rgba(234, 88, 12, 0.20),
		0 0 0 1px var(--border);
	overflow: hidden;
}

.ctl-ap-qr-canvas {
	width: 100%;
	height: 100%;
	display: block;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.ctl-ap-qr-loading {
	position: absolute;
	inset: 14px;
	background: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 11px;
	color: var(--muted);
	z-index: 3;
}
.ctl-ap-qr-loading svg {
	color: var(--accent);
	animation: ctl-spin 0.9s linear infinite;
}

.ctl-ap-qr-logo {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 36px; height: 36px;
	background: white;
	border-radius: 8px;
	padding: 4px;
	display: grid;
	place-items: center;
	box-shadow: 0 0 0 4px white;
	z-index: 2;
}
.ctl-ap-qr-logo img {
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
}

.ctl-ap-qr-scan {
	position: absolute;
	left: 14px; right: 14px;
	top: 14px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
	box-shadow: 0 0 12px rgba(234, 88, 12, 0.6);
	animation: ctl-ap-qr-scan-anim 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
	pointer-events: none;
	border-radius: 2px;
	z-index: 2;
}

@keyframes ctl-ap-qr-scan-anim {
	0%   { transform: translateY(0);    opacity: 0; }
	10%  { opacity: 1; }
	50%  { transform: translateY(180px); opacity: 0.8; }
	60%  { opacity: 0; }
	100% { transform: translateY(0);    opacity: 0; }
}

/* Status row */
.ctl-ap-status {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: rgba(15, 15, 17, 0.5);
	border: 1px solid var(--border);
	border-radius: 10px;
	margin-bottom: 14px;
	font-size: 13px;
	color: var(--ink-dim);
	transition: border-color 240ms;
}

.ctl-ap-status.approve-status-ok {
	border-color: var(--good);
	color: var(--good);
}

.ctl-ap-stat {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.ctl-ap-stat svg { color: var(--accent); flex-shrink: 0; }
.ctl-ap-stat strong { color: var(--ink); font-weight: 600; }

.ctl-ap-timer {
	font-family: var(--font-mono);
	font-feature-settings: "tnum" 1;
	color: var(--accent);
	letter-spacing: 0;
	font-weight: 700;
}

.ctl-ap-rule {
	width: 1px; height: 14px;
	background: var(--border);
}

/* OTP block */
.ctl-ap-otp {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 16px;
	background: rgba(15, 15, 17, 0.4);
	border: 1px dashed var(--border-2);
	border-radius: 10px;
	margin-bottom: 10px;
}

.ctl-ap-otp-head {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ctl-ap-otp-tag {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
}

.ctl-ap-otp-deck {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.4;
}

.ctl-ap-otp-input {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.ctl-ap-otp-input input,
.otp-box {
	width: 44px;
	height: 54px;
	background: var(--bg);
	border: 1px solid var(--border-2);
	border-radius: 8px;
	color: var(--ink);
	font-family: var(--font-mono);
	font-feature-settings: "tnum" 1;
	font-size: 22px;
	font-weight: 600;
	text-align: center;
	padding: 0;
	transition: border-color 180ms, box-shadow 180ms, background 180ms;
}

.ctl-ap-otp-input input:hover { border-color: var(--ink-dim); }

.ctl-ap-otp-input input:focus {
	outline: none;
	border-color: var(--accent);
	background: rgba(234, 88, 12, 0.06);
	box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18);
}

.otp-box.filled {
	border-color: var(--accent);
	color: var(--accent);
}

.ctl-ap-otp-sep {
	display: inline-block;
	width: 10px;
	height: 1px;
	background: var(--border-2);
	margin: 0 4px;
}

/* ─── Bottom register · steps ─── */

.ctl-fp-foot {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px clamp(32px, 3.6vw, 56px);
	border-top: 1px solid var(--border);
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0;
	color: var(--muted);
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

.ctl-step {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.ctl-step-dot {
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 50%;
	border: 1px solid var(--border-2);
	background: transparent;
	transition: background 240ms, border-color 240ms, box-shadow 240ms;
}

.ctl-step-num {
	color: var(--ink-dim);
	font-weight: 700;
	font-family: var(--font-mono);
	font-size: 11px;
}

.ctl-step-lbl { color: var(--ink-dim); transition: color 240ms; }

.ctl-step-rule {
	flex: 1;
	height: 1px;
	background: var(--border);
	max-width: 80px;
}

/* Stage 1 · step 1 active */
.ctl-step-1 .ctl-step-dot {
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.15);
	animation: ctl-step-active-pulse 1.6s ease-in-out infinite;
}
.ctl-step-1 .ctl-step-num { color: var(--accent); }
.ctl-step-1 .ctl-step-lbl { color: var(--ink); }

/* Stage 2 · step 1 done, step 2 active */
body.stage-approve-active .ctl-step-1 .ctl-step-dot {
	background: var(--good);
	border-color: var(--good);
	box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
	animation: none;
}
body.stage-approve-active .ctl-step-1 .ctl-step-num { color: var(--good); }
body.stage-approve-active .ctl-step-1 .ctl-step-lbl { color: var(--ink); }

body.stage-approve-active .ctl-step-2 .ctl-step-dot {
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.15);
	animation: ctl-step-active-pulse 1.6s ease-in-out infinite;
}
body.stage-approve-active .ctl-step-2 .ctl-step-num { color: var(--accent); }
body.stage-approve-active .ctl-step-2 .ctl-step-lbl { color: var(--ink); }

@keyframes ctl-step-active-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.15); }
	50%      { box-shadow: 0 0 0 8px rgba(234, 88, 12, 0.25); }
}

/* ─────────────────── FORGOT · 3-stage wizard ─────────────────── */

/* Steps por stage del forgot · default = step 1 active (stage email).
   .ctl-step-fg-1 ya está marcado activo en el HTML como base. */
.ctl-step-fg-1 .ctl-step-dot {
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.15);
	animation: ctl-step-active-pulse 1.6s ease-in-out infinite;
}
.ctl-step-fg-1 .ctl-step-num,
.ctl-step-fg-1 .ctl-step-lbl { color: var(--accent); }

/* Stage 2 (otp): step 1 done · step 2 active */
body.fg-stage-otp .ctl-step-fg-1 .ctl-step-dot {
	background: var(--good);
	border-color: var(--good);
	box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
	animation: none;
}
body.fg-stage-otp .ctl-step-fg-1 .ctl-step-num { color: var(--good); }
body.fg-stage-otp .ctl-step-fg-1 .ctl-step-lbl { color: var(--ink); }
body.fg-stage-otp .ctl-step-fg-2 .ctl-step-dot {
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.15);
	animation: ctl-step-active-pulse 1.6s ease-in-out infinite;
}
body.fg-stage-otp .ctl-step-fg-2 .ctl-step-num,
body.fg-stage-otp .ctl-step-fg-2 .ctl-step-lbl { color: var(--accent); }

/* Stage 3 (password): step 1+2 done · step 3 active */
body.fg-stage-password .ctl-step-fg-1 .ctl-step-dot,
body.fg-stage-password .ctl-step-fg-2 .ctl-step-dot {
	background: var(--good);
	border-color: var(--good);
	box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
	animation: none;
}
body.fg-stage-password .ctl-step-fg-1 .ctl-step-num,
body.fg-stage-password .ctl-step-fg-2 .ctl-step-num { color: var(--good); }
body.fg-stage-password .ctl-step-fg-1 .ctl-step-lbl,
body.fg-stage-password .ctl-step-fg-2 .ctl-step-lbl { color: var(--ink); }
body.fg-stage-password .ctl-step-fg-3 .ctl-step-dot {
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.15);
	animation: ctl-step-active-pulse 1.6s ease-in-out infinite;
}
body.fg-stage-password .ctl-step-fg-3 .ctl-step-num,
body.fg-stage-password .ctl-step-fg-3 .ctl-step-lbl { color: var(--accent); }

/* Resend cooldown · pill con countdown · transforma a botón naranja al disponible */
.ctl-fg-resend {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 13px;
	color: var(--ink-dim);
	padding: 8px 0 4px;
	flex-wrap: wrap;
}
.ctl-fg-resend-q {
	color: var(--muted);
	font-size: 12px;
}
.ctl-fg-resend-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 100px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.02);
	color: var(--ink-dim);
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	cursor: not-allowed;
	overflow: hidden;
	transition: background 240ms cubic-bezier(.16,1,.3,1),
	            border-color 240ms cubic-bezier(.16,1,.3,1),
	            color 240ms cubic-bezier(.16,1,.3,1),
	            transform 220ms cubic-bezier(.16,1,.3,1);
}

/* Progress fill que se llena desde 0 a 100% durante el countdown · da feel de tiempo restante visual */
.ctl-fg-resend-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(234, 88, 12, 0.10), rgba(234, 88, 12, 0.05));
	transform-origin: right center;
	transform: scaleX(var(--ctl-fg-progress, 1));
	transition: transform 1s linear;
	pointer-events: none;
	z-index: 0;
}

.ctl-fg-resend-btn > * { position: relative; z-index: 1; }

.ctl-fg-resend-ico {
	display: inline-grid;
	width: 13px;
	height: 13px;
	color: var(--accent);
	flex-shrink: 0;
}
.ctl-fg-resend-ico > svg { grid-area: 1 / 1; transition: opacity 220ms ease; }
.ctl-fg-resend-ico-refresh { opacity: 0; }
.ctl-fg-resend-btn.is-ready .ctl-fg-resend-ico-clock { opacity: 0; }
.ctl-fg-resend-btn.is-ready .ctl-fg-resend-ico-refresh { opacity: 1; }

.ctl-fg-resend-label {
	display: inline-grid;
	min-width: 92px;
}
.ctl-fg-resend-label > span {
	grid-area: 1 / 1;
	transition: opacity 220ms ease, transform 220ms ease;
	white-space: nowrap;
	text-align: left;
}
.ctl-fg-resend-go { opacity: 0; transform: translateY(2px); pointer-events: none; }
.ctl-fg-resend-btn.is-ready .ctl-fg-resend-wait { opacity: 0; transform: translateY(-2px); pointer-events: none; }
.ctl-fg-resend-btn.is-ready .ctl-fg-resend-go   { opacity: 1; transform: translateY(0); }

.ctl-fg-resend-secs {
	font-family: var(--font-mono);
	font-feature-settings: "tnum" 1;
	font-weight: 700;
	color: var(--accent);
	margin: 0 1px;
}

/* Estado ready · transforma a CTA naranja */
.ctl-fg-resend-btn.is-ready {
	background: rgba(234, 88, 12, 0.08);
	border-color: var(--accent);
	color: var(--accent);
	cursor: pointer;
	font-weight: 600;
}
.ctl-fg-resend-btn.is-ready::before {
	background: transparent;
	transform: scaleX(0);
}
.ctl-fg-resend-btn.is-ready:hover {
	background: var(--accent);
	color: #0F0F11;
	transform: translateY(-1px);
}
.ctl-fg-resend-btn.is-ready:hover .ctl-fg-resend-ico { color: #0F0F11; }

/* Spinner overlay durante el resend (mientras se ejecuta el fetch) */
.ctl-fg-resend-btn.is-loading {
	pointer-events: none;
	opacity: 0.7;
}

/* Password strength checks */
.ctl-pass-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-top: -4px;
	padding: 4px 0;
}
.ctl-pass-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--muted);
	transition: color 180ms ease;
}
.ctl-pass-check .ctl-pass-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--border-2);
	transition: background 180ms ease, box-shadow 180ms ease;
}
.ctl-pass-check.is-ok { color: var(--good); }
.ctl-pass-check.is-ok .ctl-pass-dot {
	background: var(--good);
	box-shadow: 0 0 6px rgba(34, 197, 94, .5);
}

/* ─────────────────── REDUCED MOTION ─────────────────── */

@media (prefers-reduced-motion: reduce) {
	.ctl-particle, .ctl-blob-fp-1, .ctl-blob-fp-2,
	.ctl-vault-orbit::before, .ctl-vault-orbit::after,
	.ctl-marquee-track, .ctl-status-dot,
	.ctl-step-fg-1 .ctl-step-dot, .ctl-step-fg-2 .ctl-step-dot, .ctl-step-fg-3 .ctl-step-dot,
	.ctl-ap-ping, .ctl-ap-bio, .ctl-ap-qr-scan,
	.ctl-step-1 .ctl-step-dot, .ctl-step-2 .ctl-step-dot {
		animation: none !important;
	}
	.ctl-submit::before { display: none; }
}

/* ─────────────────── RESPONSIVE ─────────────────── */

/* Tablet · keep two-column tighter */
@media (max-width: 1100px) and (min-width: 821px) {
	.ctl { grid-template-columns: minmax(280px, 36%) 1fr; }
	.ctl-brand { padding: 24px 28px 18px; }
	.ctl-hero-h1 { font-size: clamp(28px, 4vw, 44px); }
	.ctl-ap-otp { gap: 14px; }
	.ctl-ap-otp-input input,
	.otp-box { width: 40px; height: 50px; font-size: 20px; }
}

/* Mobile · hide brand panel, show horizontal logo at top */
@media (max-width: 820px) {
	html, body { height: auto; overflow: auto; }
	.ctl {
		grid-template-columns: 1fr;
		height: auto;
		min-height: 100vh;
		overflow: visible;
	}
	.ctl-form-panel {
		height: auto;
		min-height: 100vh;
		overflow: visible;
	}
	.ctl-brand { display: none; }

	.ctl-mobile-mark {
		display: flex;
		justify-content: center;
		padding: 24px 20px 8px;
		position: relative;
		z-index: 2;
	}
	.ctl-mobile-mark img {
		height: 26px;
		width: auto;
		object-fit: contain;
	}

	.ctl-fp-head {
		padding: 14px 20px;
		flex-wrap: wrap;
		gap: 8px;
		justify-content: center;
	}
	.ctl-fp-corner-l { display: none; }
	body.stage-approve-active .ctl-fp-corner-l {
		display: inline-flex;
	}

	.ctl-fp-body {
		padding: 24px 24px;
		justify-content: flex-start;
		padding-top: clamp(20px, 4vh, 40px);
	}
	.ctl-fp-h1 {
		font-size: clamp(34px, 7vw, 44px);
		line-height: 1.12;
	}
	.ctl-fp-sub { font-size: 14px; }

	.ctl-fp-foot { padding: 14px 20px; gap: 10px; }
	.ctl-step-rule { display: none; }
	.ctl-step { width: 100%; font-size: 11px; }

	/* Approve: stack pair vertical */
	.ctl-ap-pair { grid-template-columns: 1fr; gap: 32px; margin-bottom: 24px; }
	.ctl-ap-stage, .ctl-ap-qr-card { height: 200px; }
	.ctl-ap-pulse { width: 240px; height: 240px; }
	.ctl-ap-phone { width: 110px; }
	.ctl-ap-qr-frame { width: 180px; height: 180px; padding: 12px; }
	.ctl-ap-pair-label { font-size: 12px; }

	.ctl-ap-status {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 14px 16px;
	}
	.ctl-ap-rule { display: none; }

	.ctl-ap-otp {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 18px 16px;
	}
	.ctl-ap-otp-head { text-align: center; gap: 6px; }
	.ctl-ap-otp-input { justify-content: center; gap: 8px; }
	.ctl-ap-otp-input input,
	.otp-box {
		width: clamp(40px, 13vw, 52px);
		height: clamp(48px, 15vw, 60px);
		font-size: clamp(18px, 5vw, 22px);
		border-radius: 10px;
	}
	.ctl-ap-otp-sep { width: 8px; margin: 0 2px; }
}

/* Small mobile */
@media (max-width: 480px) {
	.ctl-fp-h1 { font-size: clamp(28px, 8vw, 34px); }
	.ctl-fp-body { padding: 16px 20px; }
	.ctl-field input { font-size: 17px; }
	.ctl-submit { padding: 16px 20px; }
	.ctl-ap-pair { gap: 24px; }
	.ctl-ap-stage, .ctl-ap-qr-card { height: 180px; }
	.ctl-ap-pulse { width: 200px; height: 200px; }
	.ctl-ap-phone { width: 96px; }
	.ctl-ap-qr-frame { width: 160px; height: 160px; padding: 10px; }
	.ctl-ap-otp-input { gap: 6px; }
	.ctl-ap-otp-input input,
	.otp-box {
		width: clamp(38px, 12vw, 48px);
		height: clamp(46px, 14vw, 56px);
	}
	.ctl-ap-otp-sep { width: 4px; margin: 0; }
}