/*
 * Detector de Bulos — Activation page (/activar, /en/activate).
 *
 * Self-contained: the activation route uses a standalone PHP template, so this
 * file cannot lean on landing.css. It re-declares the Signal tokens it needs
 * with the same values used elsewhere, so the page matches the rest of the site.
 *
 * Panel visibility is driven exclusively by the HTML `hidden` attribute set from
 * activate.js. Nothing here hides content on its own: if the script never runs,
 * the no-JS panel stays visible and the page is still fully usable.
 */

:root {
	--ddb-void:      #06070c;
	--ddb-deep:      #0a0c13;
	--ddb-glass:     rgba(255, 255, 255, 0.04);
	--ddb-glass-2:   rgba(255, 255, 255, 0.065);
	--ddb-line:      rgba(255, 255, 255, 0.085);
	--ddb-line-hi:   rgba(255, 255, 255, 0.18);
	--ddb-ink-hi:    #f4f6fb;
	--ddb-ink:       #dfe4f0;
	--ddb-ink-mid:   #a7afc4;
	--ddb-ink-dim:   #838ca2;
	--ddb-indigo:    #6366f1;
	--ddb-indigo-lift: #818cf8;
	--ddb-emerald:   #10b981;
	--ddb-emerald-soft: #34d399;
	--ddb-rose:      #fb7185;
	--ddb-amber:     #fbbf24;
	--ddb-r-sm:      10px;
	--ddb-r:         14px;
	--ddb-r-lg:      20px;
	--ddb-r-pill:    999px;
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

body.ddb-act-body {
	margin: 0;
	background: var(--ddb-void);
	color: var(--ddb-ink);
	font-family: var(--ddb-sans);
	-webkit-font-smoothing: antialiased;
}

.ddb-act__main {
	display: block;
	min-height: 100vh;
	padding: clamp(3.5rem, 9vw, 6rem) clamp(1.15rem, 4vw, 2.5rem) clamp(3rem, 8vw, 5rem);
	background:
		radial-gradient(120% 70% at 50% -10%, rgba(99, 102, 241, 0.16), transparent 60%),
		var(--ddb-void);
}

.ddb-act {
	max-width: 640px;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.ddb-act__head {
	text-align: center;
	margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
}

.ddb-act__eyebrow {
	margin: 0 0 0.6rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ddb-indigo-lift);
}

.ddb-act__h1 {
	margin: 0 0 0.75rem;
	font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.85rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ddb-ink-hi);
}

.ddb-act__lead {
	margin: 0 auto;
	max-width: 46ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--ddb-ink-mid);
}

.ddb-act__plan {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 1.15rem 0 0;
	padding: 0.4rem 0.95rem;
	border: 1px solid var(--ddb-line-hi);
	border-radius: var(--ddb-r-pill);
	background: var(--ddb-glass);
}

.ddb-act__plan-label {
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ddb-ink-dim);
}

.ddb-act__plan-value {
	font-size: 0.98rem;
	color: var(--ddb-ink-hi);
}

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */

.ddb-act__panel {
	padding: clamp(1.4rem, 4vw, 2.1rem);
	border: 1px solid var(--ddb-line);
	border-radius: var(--ddb-r-lg);
	background: var(--ddb-glass);
	box-shadow: 0 24px 60px -40px rgba(0, 0, 0, 1);
}

.ddb-act__panel[hidden] {
	display: none;
}

.ddb-act__panel--ok {
	border-color: rgba(16, 185, 129, 0.42);
	background: linear-gradient(180deg, rgba(16, 185, 129, 0.1), var(--ddb-glass));
}

.ddb-act__panel--err {
	border-color: rgba(251, 113, 133, 0.42);
	background: linear-gradient(180deg, rgba(244, 63, 94, 0.09), var(--ddb-glass));
}

.ddb-act__h2 {
	margin: 0 0 0.65rem;
	font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
	line-height: 1.25;
	color: var(--ddb-ink-hi);
}

.ddb-act__panel p {
	margin: 0 0 0.9rem;
	line-height: 1.62;
	color: var(--ddb-ink);
}

.ddb-act__panel p:last-child {
	margin-bottom: 0;
}

.ddb-act__note {
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--ddb-ink-dim);
}

.ddb-act__note--warn {
	color: var(--ddb-amber);
}

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

.ddb-act__steps,
.ddb-act__list {
	margin: 0 0 1.1rem;
	padding-left: 1.35rem;
	color: var(--ddb-ink);
	line-height: 1.62;
}

.ddb-act__steps li,
.ddb-act__list li {
	margin-bottom: 0.5rem;
}

.ddb-act__steps li::marker {
	color: var(--ddb-indigo-lift);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Buttons and store links
   -------------------------------------------------------------------------- */

.ddb-act__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 1.1rem 0 0;
}

.ddb-act__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.7rem 1.35rem;
	border: 1px solid transparent;
	border-radius: var(--ddb-r-pill);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.ddb-act__btn--primary {
	background: var(--ddb-indigo);
	color: #fff;
}

.ddb-act__btn--primary:hover:not([disabled]) {
	background: var(--ddb-indigo-lift);
	transform: translateY(-1px);
}

.ddb-act__btn--ghost {
	background: var(--ddb-glass-2);
	border-color: var(--ddb-line-hi);
	color: var(--ddb-ink-hi);
}

.ddb-act__btn--ghost:hover:not([disabled]) {
	background: rgba(255, 255, 255, 0.1);
}

.ddb-act__btn--lg {
	padding: 0.9rem 1.9rem;
	font-size: 1.05rem;
}

.ddb-act__btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.ddb-act__link {
	padding: 0.35rem 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.9rem;
	color: var(--ddb-indigo-lift);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.ddb-act__stores {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin: 1.1rem 0;
}

.ddb-act__store {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 44px;
	padding: 0.6rem 1.15rem;
	border: 1px solid var(--ddb-line-hi);
	border-radius: var(--ddb-r-pill);
	background: var(--ddb-glass-2);
	color: var(--ddb-ink-hi);
	font-weight: 600;
	text-decoration: none;
}

.ddb-act__store:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--ddb-indigo-lift);
}

.ddb-act__store[hidden] {
	display: none;
}

.ddb-act__store svg {
	flex: none;
}

/* --------------------------------------------------------------------------
   Licence key block (manual path only)
   -------------------------------------------------------------------------- */

.ddb-act__keybox {
	margin: 1.25rem 0;
	padding: 1.1rem;
	border: 1px dashed var(--ddb-line-hi);
	border-radius: var(--ddb-r);
	background: rgba(0, 0, 0, 0.25);
}

.ddb-act__key-label {
	margin: 0 0 0.4rem !important;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ddb-ink-dim);
}

.ddb-act__key {
	display: block;
	padding: 0.75rem 0.9rem;
	border-radius: var(--ddb-r-sm);
	background: rgba(255, 255, 255, 0.06);
	font-family: var(--ddb-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: 1rem;
	letter-spacing: 0.04em;
	color: var(--ddb-emerald-soft);
	word-break: break-all;
	user-select: all;
}

/* --------------------------------------------------------------------------
   Spinner — decorative only; every state it accompanies has a hard timeout.
   -------------------------------------------------------------------------- */

.ddb-act__spinner {
	width: 26px;
	height: 26px;
	margin: 0 0 1rem !important;
	border: 2px solid var(--ddb-line-hi);
	border-top-color: var(--ddb-indigo-lift);
	border-radius: 50%;
	animation: ddb-act-spin 0.9s linear infinite;
}

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

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ddb-act__foot {
	margin-top: 1.75rem;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.ddb-act__btn:focus-visible,
.ddb-act__link:focus-visible,
.ddb-act__store:focus-visible,
.ddb-act__key:focus-visible {
	outline: 2px solid var(--ddb-indigo-lift);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ddb-act__spinner {
		animation-duration: 2.4s;
	}
	.ddb-act__btn {
		transition: none;
	}
	.ddb-act__btn--primary:hover:not([disabled]) {
		transform: none;
	}
}