@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');
/* VARIÁVEIS DE DESIGN PREMIUM (CYBER-LUXURY) */
:root {
	--luxury-bg: #03060f;
	--luxury-gold: #d4af37;
	--luxury-gold-glow: rgba(212, 175, 55, 0.35);
	--luxury-card-bg: rgba(10, 16, 31, 0.45);
	--luxury-border: rgba(212, 175, 55, 0.08);
	--text-white: #ffffff;
	--text-gold-light: #f9e8a2;
	--text-silver: #94a3b8;
	--secondary:#00cc6d;
}

body {
	background-color: var(--luxury-bg);
	color: var(--text-white);
	font-family: 'Inter', sans-serif;
	overflow-x: hidden;
	position: relative;
	min-height: 100vh;
}

/* CONTAINER CENTRALIZADOR DA CAIXA DE LOGIN */
.luxury-login-box {
	position: relative;
	max-width: 460px;
	width: 100%;
	margin: 40px auto;
	padding: 40px;
	border-radius: 20px;

	/* Corpo Metálico Obsidiana Profundo */
	background: linear-gradient(to bottom, #121620 0%, #05070a 100%);

	/* Borda Metálica Fina Ouro Champagne */
	border: 1px solid rgba(212, 175, 55, 0.2);

	/* Múltiplas Sombras 3D: Chanfro de luz superior e projeção de flutuação */
	box-shadow:
		inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
		inset 0 -2px 8px 0 rgba(0, 0, 0, 0.8),
		0 25px 60px rgba(0, 0, 0, 0.7),
		0 0 40px rgba(212, 175, 55, 0.03);

	overflow: hidden;
}

/* GLOW NEON DE FUNDO PARA DETRÁS DA CAIXA */
.login-glow {
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 60%);
	z-index: 1;
	pointer-events: none;
}

.luxury-login-box form,
.luxury-login-box .login-header {
	position: relative;
	z-index: 2;
	/* Garante que fiquem acima do glow */
}

/* CABEÇALHO DO FORMULÁRIO */
.login-header {
	text-align: center;
	margin-bottom: 32px;
}

.login-header h2 {
	font-size: 1.8rem;
	font-weight: 800;
	letter-spacing: -0.5px;
	margin-bottom: 8px;
	background: linear-gradient(135deg, #ffffff 40%, #f3e5ab 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.login-header p {
	color: #94a3b8;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* GRUPOS DE ENTRADA (INPUTS METÁLICOS) */
.input-group-luxury {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
}

.input-group-luxury label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #f3e5ab;
	display: flex;
	align-items: center;
	gap: 6px;
}

.input-group-luxury label i {
	color: #d4af37;
	font-size: 0.85rem;
}

/* INPUTS ESCULPIDOS EM BAIXO RELEVO (ENGRAVED EFFECT) */
.input-group-luxury input {
	width: 100%;
	padding: 14px 16px;
	border-radius: 8px;
	background: #090c12;
	border: 1px solid rgba(255, 255, 255, 0.05);
	color: #ffffff;
	font-family: inherit;
	font-size: 0.95rem;
	outline: none;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

	/* Sombra interna para criar o efeito 3D de "furo" ou profundidade na caixa */
	box-shadow:
		inset 0 2px 4px 0 rgba(0, 0, 0, 0.6),
		inset 0 -1px 0 0 rgba(255, 255, 255, 0.03);
}

/* Foco ativo do Input (Acende em Ouro Champagne) */
.input-group-luxury input:focus {
	border-color: rgba(212, 175, 55, 0.5);
	background: #0d111a;
	box-shadow:
		inset 0 2px 4px 0 rgba(0, 0, 0, 0.8),
		0 0 15px rgba(212, 175, 55, 0.1);
}

/* Estilização do texto de exemplo (Placeholder) */
.input-group-luxury input::placeholder {
	color: #4b5563;
}

/* UTILITÁRIOS (LEMBRAR-ME E RECUPERAÇÃO) */
.login-utilities {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.85rem;
	margin-bottom: 28px;
	color: #94a3b8;
}

.remember-me {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}

.remember-me input {
	accent-color: #d4af37;
	/* Força o checkbox a ficar dourado nos navegadores modernos */
	cursor: pointer;
}

.forgot-password {
	color: #f3e5ab;
	text-decoration: none;
	transition: color 0.2s ease;
}

.forgot-password:hover {
	color: #ffffff;
}

/* BOTÃO DE SUBMIT LUXURY GOLD (HERDADO DA VERSÃO ANTERIOR COM 3D EXTRA) */
.btn-luxury-submit {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: linear-gradient(135deg, #e5c158 0%, #b89326 100%);
	color: #050a14;
	padding: 16px;
	border: none;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1rem;
	font-family: inherit;
	letter-spacing: 0.2px;
	box-shadow: 0 10px 25px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.btn-luxury-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 15px 35px rgba(212, 175, 55, 0.45);
	background: linear-gradient(135deg, #fceaa7 0%, #d4af37 100%);
}

.btn-luxury-submit active {
	transform: translateY(0);
}

/* SHIMMER EFFECT LENTO PARA O BOTÃO DE LOGIN (SINCRO COM O RESTANTE DO SAAS) */
.btn-luxury-submit::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -150%;
	width: 60%;
	height: 200%;
	background: linear-gradient(90deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.45) 50%,
			rgba(255, 255, 255, 0) 100%);
	transform: skewX(-30deg);
	animation: luxury-shimmer-hyper 7s infinite cubic-bezier(0.25, 1, 0.5, 1);
	animation-delay: 3s;
	/* Entra de forma assíncrona após os outros brilhos da tela */
}

.ambiente{
	display: flex;
	justify-content: space-between;
	margin: 10px 0px;
	gap:20px;
}
.ambiente i{
	color: var(--secondary);
}

/* BOX DE MENSAGENS DE FEEDBACK (ERRO OU SUCESSO) */
.auth-message-box {
	margin-top: 20px;
	padding: 12px;
	border-radius: 6px;
	font-size: 0.85rem;
	text-align: center;
	font-weight: 500;
	display: none;
	/* Controlado via JS */
}

.auth-message-box.error {
	display: block;
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.2);
	color: #fca5a5;
}

.auth-message-box.success {
	display: block;
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.2);
	color: #a7f3d0;
}

/* BASE E RESET DE HARDWARE */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* CANVAS DE ONDAS QUÂNTICAS (FUNDO FIXO) */
#luxury-quantum-wave {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

/* PALCO CENTRAL E ALINHAMENTO RESPONSIVO */
.luxury-viewport {
	position: relative;
	z-index: 2;
	max-width: 1250px;
	margin: 0 auto;
	padding: 60px 24px;
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1fr;
	gap: 60px;
	align-content: center;
}

@media (min-width: 992px) {
	.luxury-viewport {
		grid-template-columns: 1.15fr 0.85fr;
		align-items: center;
		gap: 80px;
	}
}

/* COLUNA ESQUERDA: APRESENTAÇÃO MONOLÍTICA */
.brand-showcase {
	text-align: left;
}

.premium-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px;
	/* Seu padding original preservado e funcional */
	border-radius: 50px;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 28px;

	/* 1. TEXTO: Ouro champagne de alto contraste */
	color: #f3e5ab;

	/* 2. PRETO PROFUNDO METÁLICO: Tom obsidiana com pigmentação premium */
	background: linear-gradient(to bottom, #121620 0%, #05070a 100%);

	/* 3. BORDA REAL 3D: Contorno sutil simulando titânio escuro */
	border: 1px solid rgba(212, 175, 55, 0.25);

	/* 4. VOLUMETRIA TRIPLA EM SOMBRAS (EFEITO 3D DO MÁXIMO LUXO):
       - O primeiro inset cria o filete de luz branca espelhada no topo interno.
       - O segundo inset escurece a base interna para dar peso física ao objeto.
       - As sombras externas projetam o badge flutuando para frente na tela. */
	box-shadow:
		inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
		inset 0 -2px 6px 0 rgba(0, 0, 0, 0.8),
		0 4px 15px rgba(0, 0, 0, 0.65),
		0 0 20px rgba(212, 175, 55, 0.04);

	/* Infraestrutura do feixe de luz que você configurou */
	position: relative;
	overflow: hidden;
}

/* O Feixe de Luz Metalizado Lento (Ciclo de 7s) */
.premium-tag::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -150%;
	width: 60%;
	height: 200%;

	background: linear-gradient(90deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.05) 20%,
			rgba(255, 255, 255, 0.45) 50%,
			rgba(255, 255, 255, 0.05) 80%,
			rgba(255, 255, 255, 0) 100%);

	transform: skewX(-30deg);
	animation: luxury-shimmer-hyper 9s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

.premium-tag i {
	color: #d4af37;
	font-size: 0.9rem;
	filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
}

.brand-showcase h1 {
	font-size: 3rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -1.5px;
	margin-bottom: 24px;
	background: linear-gradient(135deg, #ffffff 30%, var(--text-gold-light) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (min-width: 1200px) {
	.brand-showcase h1 {
		font-size: 3.5rem;
	}
}

.brand-showcase p {
	color: var(--text-silver);
	font-size: 1.15rem;
	line-height: 1.65;
	margin-bottom: 40px;
	font-weight: 300;
}

/* BOTÕES CORPORATIVOS DE LUXO */
.luxury-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.btn-luxury-gold {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg, #e5c158 0%, #b89326 100%);
	color: #050a14;
	padding: 18px 40px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	letter-spacing: -0.2px;
	box-shadow: 0 0 25px var(--luxury-gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

.btn-luxury-gold:hover {
	transform: translateY(-3px);
	box-sizing: border-box;
	box-shadow: 0 0 40px rgba(212, 175, 55, 0.55);
	background: linear-gradient(135deg, #fceaa7 0%, #d4af37 100%);
}

.btn-luxury-link {
	background: var(--luxury-bg);
	color: var(--text-gold-light);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: color 0.3s ease, transform 0.3s ease;
}

.btn-luxury-link:hover {
	color: #ffffff;
	transform: translateX(4px);
}

/* COLUNA DIREITA: CONSOLE TELEMÉTRICO LAPIDADO */
.telemetry-console {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* CARD COM EFEITO VIDRO ESCURO (GLASSMORPHISM) */
.gauge-card,
.vector-chart-card {
	background: var(--luxury-card-bg);
	border: 1px solid var(--luxury-border);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* ARQUITETURA DO GAUGE CIRCULAR */
.gauge-card {
	display: flex;
	align-items: center;
	gap: 28px;
}

@media (max-width: 576px) {
	.gauge-card {
		flex-direction: column;
		text-align: center;
	}
}

.gauge-wrapper {
	position: relative;
	width: 160px;
	height: 160px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#circular-core-gauge {
	position: absolute;
	top: 0;
	left: 0;
}

.gauge-center-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.gauge-center-text span {
	font-size: 2.2rem;
	font-weight: 800;
	font-family: monospace;
	letter-spacing: -1px;
	color: #ffffff;
	line-height: 1;
}

.gauge-center-text small {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--text-silver);
	margin-top: 4px;
}

.gauge-info h3 {
	font-size: 1.15rem;
	font-weight: 600;
	margin-bottom: 6px;
	color: #ffffff;
}

.gauge-info p {
	color: var(--text-silver);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* MATRIZ VETORIAL (EQUALIZADOR PREMIUM) */
.vector-chart-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.chart-title {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-silver);
	text-transform: uppercase;
	letter-spacing: 1px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.chart-title i {
	color: var(--luxury-gold);
}

.bar-grid-dynamic {
	display: grid;
	grid-template-columns: repeat(18, 1fr);
	gap: 4px;
	align-items: flex-end;
	height: 80px;
	padding-top: 10px;
}



/* EFICÁCIA DE LUXO: FEIXE METÁLICO DUPLO (APLICADO EM TAGS E BOTÕES) */
.premium-tag,
.btn-luxury-gold {
	position: relative;
	overflow: hidden;
}

.premium-tag::after,
.btn-luxury-gold::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -150%;
	width: 60%;
	height: 200%;

	/* Feixe de luz ultra focado com brilho centralizado */
	background: linear-gradient(90deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.4) 50%,
			rgba(255, 255, 255, 0) 100%);

	transform: skewX(-30deg);
	animation: luxury-shimmer-hyper 9s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

/* Delay assíncrono para o botão e a tag não brilharem ao mesmo tempo, gerando sofisticação */
.btn-luxury-gold::after {
	animation-delay: 5s;
}

@keyframes luxury-shimmer-hyper {
	0% {
		left: -150%;
	}

	80% {
		left: 150%;
	}

	/* Atravessa veloz nas primeiras frações de segundo */
	100% {
		left: 150%;
	}

	/* Descansa estático até o fim do loop */
}

/* 🌟 TECNOLOGIA MOUSE-TRACK BORDER (EFEITO LUXURY GLASS) */
.gauge-card,
.vector-chart-card {
	position: relative;
	background: radial-gradient(800px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(212, 175, 55, 0.06), transparent 40%), var(--luxury-card-bg);
	border: 1px solid rgba(212, 175, 55, 0.05);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Borda falsa inteligente que se ilumina onde o mouse passa perto */
.gauge-card::before,
.vector-chart-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 16px;
	padding: 1px;
	/* Espessura da borda iluminada */
	background: radial-gradient(250px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), rgba(212, 175, 55, 0.45), transparent 60%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Efeito extra de elevação e explosão de glow dourado ao passar o mouse diretamente no card */
.gauge-card:hover,
.vector-chart-card:hover {
	border-color: rgba(212, 175, 55, 0.2);
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 175, 55, 0.08);
	transform: translateY(-2px);
}

/* ==========================================================================
   ESTILIZAÇÃO DO WIZARD DE ONBOARDING EM PASSOS (LUXURY BLACK 3D)
   ========================================================================== */

/* CONTAINER ADAPTADO PARA FORMULÁRIOS EM ETAPAS */
.wizard-box {
    max-width: 520px; /* Levemente mais largo para acomodar grids duplos com conforto */
}

/* PAINÉIS DE CADA PASSO */
.wizard-step-panel {
    display: none; /* Escondido por padrão, controlado via JS */
    animation: fade-panel 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.wizard-step-panel.active {
    display: block;
}

/* REGRAS DE GRIDS PARA MULTI-CAMPOS */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 16px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 12px;
}

@media (min-width: 480px) {
    .form-grid-2 { grid-template-columns: 1fr 1fr; }
    .form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* ÁREA DE NAVEGAÇÃO INTERNA DO FORMULÁRIO (BOTÕES) */
.form-navigation-luxury {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* Comportamento quando tem botão de voltar e avançar lado a lado */
.form-navigation-luxury.dual-buttons {
    justify-content: space-between;
}

/* Estado desabilitado do botão de avanço (quando o e-mail não foi validado) */
.btn-luxury-submit:disabled {
    background: linear-gradient(135deg, #4b3e1c 0%, #302607 100%);
    color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
    cursor: not-allowed;
    border: 1px solid rgba(212, 175, 55, 0.05);
}

.btn-luxury-submit:disabled::after {
    display: none; /* Desliga o shimmer se o botão estiver bloqueado */
}

/* INDICADOR DE STATUS DO INPUT (LOADER DE VERIFICAÇÃO) */
.input-group-luxury {
    position: relative;
}

.input-status-icon {
    position: absolute;
    right: 16px;
    top: 38px; /* Alinhamento centralizado na altura do input */
    font-size: 0.9rem;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Classes dinâmicas injetadas pelo JS no ícone de status */
.input-status-icon.loading::after {
    content: "\f110"; /* Ícone de Spinner do FontAwesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #3b82f6;
    display: inline-block;
    animation: fa-spin 1s infinite linear;
}

.input-status-icon.available::after {
    content: "\f058"; /* Ícone de Check Circle */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #10b981;
}

.input-status-icon.invalid::after {
    content: "\f05c"; /* Ícone de Times Circle */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #ef4444;
}

/* ==========================================================================
   INDICADOR LATERAL DE PROGRESSO (WIZARD STEPS)
   ========================================================================== */
.wizard-steps-indicator {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 40px;
    padding-left: 10px;
    border-left: 2px solid rgba(255, 255, 255, 0.03);
    max-width: 320px;
}

.step-dot {
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: 0.25;
    transition: all 0.4s ease;
}

.step-dot span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: monospace;
    transition: all 0.4s ease;
}

.step-dot small {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #ffffff;
}

/* Linha vertical conectora entre os passos */
.step-line {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.05);
    margin-left: 11px;
    transition: all 0.4s ease;
}

/* Estados ativos e concluídos disparados pelo fluxo */
.step-dot.active {
    opacity: 1;
}

.step-dot.active span {
    border-color: #d4af37;
    background: #d4af37;
    color: #03060f;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.step-dot.active small {
    color: #f3e5ab;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.step-dot.completed {
    opacity: 0.6;
}

.step-dot.completed span {
    border-color: #10b981;
    background: #10b981;
    color: #03060f;
}

/* 🎬 ANIMAÇÃO DE ENTRADA SUAVE DOS PAINÉIS */
@keyframes fade-panel {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.input-luxury-select {
    width: 100%; padding: 14px 16px; border-radius: 8px; background: #090c12;
    border: 1px solid rgba(255, 255, 255, 0.05); color: #ffffff; font-family: inherit; font-size: 0.95rem;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.6); outline: none; cursor: pointer;
}
.input-url-addon { display: flex; align-items: center; background: #090c12; border-radius: 8px; box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.6); }
.input-url-addon input { background: transparent !important; box-shadow: none !important; flex: 1; }
.url-suffix { padding-right: 16px; color: #4b5563; font-family: monospace; font-size: 0.9rem; user-select: none; }