/**
 * Páginas públicas de autenticação (login, register, forgot, reset, invite)
 * — split-screen no padrão do onboarding: rail azul da marca + formulário.
 *
 * Dois mundos, mesmo truque do password-checklist.css: essas páginas NÃO têm
 * os tokens --dashboard-*, então toda cor usa var(--dashboard-*, <fallback do
 * tema light>). Zero hex fora de fallback.
 *
 * O bug histórico de scroll (overflow hidden + align-items center no login.css)
 * morre aqui pela estrutura: shell fixed + scroll interno em .auth-main +
 * .auth-content com margin auto (centraliza quando cabe, rola quando não cabe).
 */

/*
 * Tema: o CLARO é o default. O ESCURO define os tokens sob [data-theme="dark"]
 * com os valores do :root dark do dashboard.css (manter em sincronia se a
 * paleta mudar). O data-theme é resolvido antes do paint no htmlHeader
 * (localStorage → preferência do sistema) e alternado pelo switch
 * (.auth-theme-toggle, auth-theme.js). O password-checklist.css usa os mesmos
 * tokens e adapta junto.
 *
 * Identidade do site (atalia.ai): azul #2F50EE, texto azul-marinho #0B1440,
 * cinza #5B6280, faixa com gradiente em malha e títulos display em Rethink
 * Sans 700. Para o salto site → app não ter costura, aqui o tema CLARO usa a
 * paleta do site (não a do dashboard) e os dois temas compartilham a faixa.
 */
:root:not([data-theme='dark']) {
	--dashboard-bg: #f3f5ff;
	--dashboard-surface: #ffffff;
	--dashboard-surface-secondary: #eef1fb;
	--dashboard-input-bg: #f6f7fd;
	--dashboard-border: #d5daf5;
	--dashboard-text: #0b1440;
	--dashboard-text-secondary: #3a4166;
	--dashboard-text-muted: #5b6280;
	--dashboard-primary: #2f50ee;
	--dashboard-primary-hover: #2443d6;
	--auth-glow: rgba(47, 80, 238, 0.14);
	--auth-glow-2: rgba(138, 123, 255, 0.12);
	color-scheme: light;
}

:root[data-theme='dark'] {
	--dashboard-bg: #0a0a0f;
	--dashboard-surface: #111118;
	--dashboard-surface-secondary: #080809;
	--dashboard-hover-bg: #16162a;
	--dashboard-input-bg: #1a1b26;
	--dashboard-border: #23243a;
	--dashboard-text: #e0e4f0;
	--dashboard-text-secondary: #b3b7cc;
	--dashboard-text-muted: #8b8fa8;
	--dashboard-primary: #3a59f0;
	--dashboard-primary-hover: #5468f3;
	--dashboard-primary-light: #6681f7;
	--dashboard-on-primary: #ffffff;
	--dashboard-rail-bg: #0b228e;
	--dashboard-danger: #f85149;
	--dashboard-success: #3fb950;
	--dashboard-warning: #d29922;
	--dashboard-radius: 6px;
	--dashboard-radius-lg: 12px;
	--auth-glow: rgba(58, 89, 240, 0.22);
	--auth-glow-2: rgba(138, 123, 255, 0.1);
	color-scheme: dark;
}

/* Tokens da marca, iguais nos dois temas (a faixa é sempre azul) */
:root {
	--auth-ink: #0b1440;
	--auth-band:
		radial-gradient(55% 80% at 10% 0%, #5c78ff 0%, transparent 60%),
		radial-gradient(50% 70% at 95% 100%, #8a7bff 0%, transparent 60%),
		linear-gradient(135deg, #2441e0 0%, #3a59f0 50%, #5468f3 100%);
	--auth-radius: 12px;
	--auth-font: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.auth-shell {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: minmax(460px, 1.05fr) minmax(0, 1fr);
	font-family: var(--auth-font);
	background:
		radial-gradient(50% 45% at 100% 0%, var(--auth-glow), transparent 70%),
		radial-gradient(45% 40% at 0% 100%, var(--auth-glow-2), transparent 70%),
		var(--dashboard-bg, #f3f5ff);
}

/* ── Rail esquerdo (aside, nunca <nav>: style.css tem nav global) ──────── */

.auth-rail {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2.25rem clamp(2rem, 4vw, 3.75rem);
	/* Brilho suave no canto, como o hero do site (camada de fundo: um
	   pseudo-elemento vazando a faixa criaria rolagem) */
	background:
		radial-gradient(40% 35% at 88% 88%, color-mix(in srgb, var(--dashboard-on-primary, #ffffff) 14%, transparent), transparent 70%),
		var(--auth-band);
	color: var(--dashboard-on-primary, #ffffff);
	overflow-x: hidden;
	overflow-y: auto;
}

.auth-rail-top {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-right: 3rem; /* espaço do switch de tema, absoluto no canto */
}

.auth-rail-logo {
	height: 28px;
	filter: brightness(0) invert(1);
}

/* Link para o site institucional: pílula translúcida (botão secundário do site) */
.auth-rail-site {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	width: fit-content;
	margin-left: auto;
	padding: 0.4rem 0.85rem;
	border: 1px solid color-mix(in srgb, var(--dashboard-on-primary, #ffffff) 55%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--auth-ink) 25%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-size: 0.8rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--dashboard-on-primary, #ffffff);
	transition: background-color 0.15s ease;
}

.auth-rail-site:hover {
	background: color-mix(in srgb, var(--auth-ink) 38%, transparent);
	color: var(--dashboard-on-primary, #ffffff);
}

.auth-rail-site .material-symbols-rounded {
	font-size: 0.9rem;
}

.auth-rail-body {
	margin: auto 0;
	padding: 3rem 0;
	max-width: 640px;
}

/* Selo "Parceiro Oficial Meta" (pílula branca do hero do site) */
.auth-rail-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	padding: 0.4rem 0.9rem 0.4rem 1rem;
	border-radius: 999px;
	background: var(--dashboard-on-primary, #ffffff);
	color: var(--auth-ink);
	font-size: 0.8125rem;
	font-weight: 500;
	box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--auth-ink) 50%, transparent);
}

.auth-rail-badge img {
	height: 14px;
	width: auto;
	display: block;
}

/* Título display do site: 64px no desktop largo, 700, -0.02em */
.auth-rail-title {
	font-family: var(--auth-font);
	font-size: clamp(2.5rem, 4.1vw, 4rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 1.25rem;
	color: var(--dashboard-on-primary, #ffffff);
	text-wrap: balance;
}

.auth-rail-desc {
	font-size: clamp(1.05rem, 1.35vw, 1.25rem);
	line-height: 1.5;
	margin: 0;
	max-width: 520px;
	color: color-mix(in srgb, var(--dashboard-on-primary, #ffffff) 85%, transparent);
}

/* Destaques em pílulas de vidro (.glass do site) */
.auth-rail-points {
	list-style: none;
	margin: 2.25rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.auth-rail-points li {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 1rem 0.4rem 0.4rem;
	border: 1px solid color-mix(in srgb, var(--dashboard-on-primary, #ffffff) 45%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--dashboard-on-primary, #ffffff) 16%, transparent);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	font-size: 0.875rem;
	font-weight: 500;
}

.auth-rail-point-icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--dashboard-on-primary, #ffffff);
	color: var(--dashboard-primary, #2f50ee);
	display: flex;
	align-items: center;
	justify-content: center;
}

.auth-rail-point-icon .material-symbols-rounded {
	font-size: 1rem;
}

.auth-rail-foot {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: color-mix(in srgb, var(--dashboard-on-primary, #ffffff) 75%, transparent);
}

.auth-rail-foot .material-symbols-rounded {
	font-size: 1rem;
}

/* ── Switch de tema (canto superior direito da faixa) ──────────────────── */

.auth-theme-toggle {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border: 1px solid color-mix(in srgb, var(--dashboard-on-primary, #ffffff) 55%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--auth-ink) 25%, transparent);
	color: var(--dashboard-on-primary, #ffffff);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.auth-theme-toggle:hover {
	background: color-mix(in srgb, var(--auth-ink) 38%, transparent);
}

.auth-theme-toggle:focus-visible {
	outline: 2px solid var(--dashboard-on-primary, #ffffff);
	outline-offset: 2px;
}

.auth-theme-toggle .material-symbols-rounded {
	font-size: 1.1rem;
}

.auth-rail .auth-theme-toggle {
	position: absolute;
	top: 2.25rem;
	right: clamp(2rem, 4vw, 3.75rem);
}

/* ── Faixa mobile antiga: a própria faixa (.auth-rail) vira o topo ──────── */

.auth-mobile-bar {
	display: none;
}

/* ── Coluna do formulário (o fix estrutural do scroll) ─────────────────── */

.auth-main {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Formulário direto sobre o fundo com brilho azul (sem cartão) */
.auth-content {
	margin: auto;
	width: 100%;
	max-width: 440px;
	padding: clamp(2rem, 6vh, 4.5rem) 2rem;
}

.auth-head {
	margin-bottom: 1.75rem;
}

/* Título de seção do site (.text-section), na escala do cartão */
.auth-title {
	font-family: var(--auth-font);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
	color: var(--dashboard-text, #0b1440);
}

.auth-desc {
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
	color: var(--dashboard-text-muted, #5b6280);
}

/* ── Campos (escopo vence os globals dark do style.css sem !important) ─── */

.auth-shell .form-group {
	margin-bottom: 1.1rem;
}

.auth-shell .form-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 0.4rem;
	color: var(--dashboard-text-secondary, #3a4166);
	text-transform: none;
	letter-spacing: normal;
}

.auth-shell .form-input,
.auth-shell input[type='text'],
.auth-shell input[type='email'],
.auth-shell input[type='password'] {
	width: 100%;
	background: var(--dashboard-input-bg, #f1f3f8);
	border: 1px solid var(--dashboard-border, #d5daf5);
	border-radius: var(--auth-radius);
	color: var(--dashboard-text, #0b1440);
	font-family: var(--auth-font);
	font-size: 1rem;
	min-height: 48px;
	padding: 0.7rem 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.auth-shell .form-input::placeholder,
.auth-shell input::placeholder {
	color: var(--dashboard-text-muted, #5b6280);
	opacity: 0.8;
}

.auth-shell .form-input:focus,
.auth-shell input[type='text']:focus,
.auth-shell input[type='email']:focus,
.auth-shell input[type='password']:focus {
	outline: none;
	background: var(--dashboard-surface, #ffffff);
	border-color: var(--dashboard-primary, #2f50ee);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--dashboard-primary, #2f50ee) 14%, transparent);
}

/* ── Campo de senha com botão "ver senha" ──────────────────────────────── */

.auth-input-pw {
	position: relative;
}

.auth-input-pw .form-input {
	padding-right: 2.9rem;
}

.auth-pw-toggle {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 0 var(--auth-radius) var(--auth-radius) 0;
	background: transparent;
	color: var(--dashboard-text-muted, #5b6280);
	cursor: pointer;
	transition: color 0.15s ease;
}

.auth-pw-toggle:hover,
.auth-pw-toggle:focus-visible {
	color: var(--dashboard-text, #0b1440);
}

.auth-pw-toggle:focus-visible {
	outline: 2px solid var(--dashboard-primary, #2f50ee);
	outline-offset: -2px;
}

.auth-pw-toggle .material-symbols-rounded {
	font-size: 1.25rem;
	line-height: 1;
}

/* ── Botão primário ────────────────────────────────────────────────────── */

/* Pílula primária do site (azul sobre fundo claro) */
.auth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	border: none;
	border-radius: 999px;
	background: var(--dashboard-primary, #2f50ee);
	color: var(--dashboard-on-primary, #ffffff);
	font-family: var(--auth-font);
	font-size: 1rem;
	font-weight: 600;
	padding: 0.7rem 1.5rem;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--dashboard-primary, #2f50ee) 55%, transparent);
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-btn:hover {
	background: var(--dashboard-primary-hover, #2443d6);
	color: var(--dashboard-on-primary, #ffffff);
}

.auth-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.auth-btn:focus-visible {
	outline: 2px solid var(--dashboard-primary, #2f50ee);
	outline-offset: 2px;
}

/* ── Turnstile (anti-bot) — o container fica vazio quando desligado ────── */

.auth-turnstile {
	margin-bottom: 1.1rem;
}

.auth-turnstile:empty {
	margin-bottom: 0;
}

/* ── Links, divisor, rodapé do form ────────────────────────────────────── */

.auth-link {
	color: var(--dashboard-primary, #2f50ee);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.auth-link:hover {
	color: var(--dashboard-primary-hover, #2443d6);
	text-decoration: underline;
}

.auth-row {
	display: flex;
	justify-content: flex-end;
	margin: -0.35rem 0 1.1rem;
}

.auth-divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem 0;
	font-size: 0.8rem;
	color: var(--dashboard-text-muted, #5b6280);
}

.auth-divider::before,
.auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--dashboard-border, #d5daf5);
}

.auth-alt {
	text-align: center;
	font-size: 0.9rem;
	color: var(--dashboard-text-muted, #5b6280);
	margin-top: 1.5rem;
}

.auth-alt .auth-link .material-symbols-rounded {
	font-size: 0.95rem;
	vertical-align: -2px;
	margin-right: 0.2rem;
}

/* ── Alertas (style.css tem #error-message por ID: override escopado) ──── */

.auth-shell .alert {
	display: none;
	padding: 0.75rem 1rem;
	border-radius: var(--auth-radius);
	font-size: 0.875rem;
	line-height: 1.45;
	margin-bottom: 1.25rem;
	border: 1px solid;
}

.auth-shell .alert-danger {
	background: color-mix(in srgb, var(--dashboard-danger, #cf222e) 8%, transparent);
	border-color: color-mix(in srgb, var(--dashboard-danger, #cf222e) 25%, transparent);
	color: var(--dashboard-danger, #cf222e);
}

.auth-shell .alert-success {
	background: color-mix(in srgb, var(--dashboard-success, #1a7f37) 8%, transparent);
	border-color: color-mix(in srgb, var(--dashboard-success, #1a7f37) 25%, transparent);
	color: var(--dashboard-success, #1a7f37);
}

.auth-shell #error-message,
.auth-shell #success-message {
	margin-top: 0;
}

.auth-shell #error-message {
	color: var(--dashboard-danger, #cf222e);
}

.auth-shell #success-message {
	color: var(--dashboard-success, #1a7f37);
}

/* ── Toggle segmentado (métodos 2FA) ───────────────────────────────────── */

/* Borda e raio no contêiner (overflow faz o arredondado), botões sem raio */
.auth-seg {
	display: flex;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--dashboard-border, #d5daf5);
	border-radius: 999px;
	background: var(--dashboard-input-bg, #f6f7fd);
	overflow: hidden;
	margin-top: 0.4rem;
}

.auth-seg-btn {
	flex: 1;
	min-height: 36px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--dashboard-text-secondary, #3a4166);
	font-size: 0.875rem;
	font-weight: 500;
	padding: 0.5rem 0.5rem;
	cursor: pointer;
}

.auth-seg-btn.active {
	background: var(--dashboard-primary, #2f50ee);
	color: var(--dashboard-on-primary, #ffffff);
	font-weight: 600;
}

.auth-hint {
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--dashboard-text-muted, #5b6280);
	margin: 0.6rem 0 1rem;
}

.auth-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--dashboard-text-secondary, #3a4166);
	cursor: pointer;
	margin-bottom: 1rem;
}

/* ── Estados de página (sucesso / link inválido) ───────────────────────── */

.auth-state {
	text-align: center;
	padding: 0.5rem 0;
}

.auth-state-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.auth-state-icon .material-symbols-rounded {
	font-size: 1.6rem;
}

.auth-state-icon.is-success {
	background: color-mix(in srgb, var(--dashboard-success, #1a7f37) 10%, transparent);
	color: var(--dashboard-success, #1a7f37);
}

.auth-state-icon.is-danger {
	background: color-mix(in srgb, var(--dashboard-danger, #cf222e) 10%, transparent);
	color: var(--dashboard-danger, #cf222e);
}

.auth-state-title {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--dashboard-text, #0b1440);
	margin: 0 0 0.4rem;
}

.auth-state-desc {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--dashboard-text-muted, #5b6280);
	margin: 0 0 1.25rem;
}

/* ── Responsivo ────────────────────────────────────────────────────────── */

/* Mobile: a faixa azul vira o topo (logo, selo, título display) e o
   formulário vem logo abaixo; a página inteira rola. */
@media (max-width: 900px) {
	.auth-shell {
		display: block;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.auth-rail {
		overflow: visible;
		padding: 1.1rem 1.25rem 2rem;
	}

	.auth-rail-top {
		padding-right: 2.75rem;
	}

	.auth-rail-logo {
		height: 22px;
	}

	.auth-rail-site {
		padding: 0.3rem 0.7rem;
		font-size: 0.75rem;
	}

	.auth-rail .auth-theme-toggle {
		top: 1.1rem;
		right: 1.25rem;
		width: 32px;
		height: 32px;
		margin-top: -2px;
	}

	.auth-rail-body {
		margin: 0;
		padding: 2rem 0 0;
	}

	.auth-rail-badge {
		margin-bottom: 1rem;
		font-size: 0.75rem;
	}

	.auth-rail-title {
		font-size: clamp(2rem, 9.5vw, 2.5rem);
		margin-bottom: 0.75rem;
	}

	.auth-rail-desc {
		font-size: 1rem;
	}

	.auth-rail-points,
	.auth-rail-foot {
		display: none;
	}

	.auth-main {
		overflow: visible;
	}

	.auth-content {
		margin: 0 auto;
		padding: 2rem 1.25rem 2.5rem;
	}

	.auth-title {
		font-size: 1.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.auth-shell .form-input,
	.auth-shell input,
	.auth-btn {
		transition: none;
	}
}