/* =========================================================
	TALENTHUB LOGIN - BASE
========================================================= */

:root{
	--th-login-green:var(--th-palette-rgb-132-255-056);
	--th-login-green-dark:var(--th-palette-rgb-000-176-080);
	--th-login-blue:var(--th-palette-rgb-000-212-255);

	--th-login-bg:
		radial-gradient(circle at 15% 30%, var(--th-radial-secondary), var(--th-color-transparent) 28%),
		radial-gradient(circle at 85% 35%, var(--th-radial-primary), var(--th-color-transparent) 30%),
		linear-gradient(180deg, var(--th-hero-overlay-start), var(--th-hero-overlay-end));

	--th-login-grid:var(--th-grid-light);
	--th-login-text:var(--th-color-text-main);
	--th-login-footer-space:64px;
}

html,
body{
	width:100%;
	min-height:100vh;
}

body{
	margin:0;
	overflow:hidden;
	padding-bottom:var(--th-login-footer-space);

	font-family:
		Inter,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;

	color:var(--th-login-text);
	background:var(--th-login-bg);

	position:relative;

	transition:
		background .25s ease,
		color .25s ease;
}

/* =========================================================
	FONDO GRID
========================================================= */

body::before{
	content:"";

	position:fixed;
	inset:0;

	background-image:
		linear-gradient(
			var(--th-login-grid) 1px,
			var(--th-color-transparent) 1px
		),
		linear-gradient(
			90deg,
			var(--th-login-grid) 1px,
			var(--th-color-transparent) 1px
		);

	background-size:42px 42px;

	pointer-events:none;
	z-index:0;
}

/* =========================================================
	GLOW IZQUIERDA
========================================================= */

body::after{
	content:"";

	position:fixed;

	top:-220px;
	left:-220px;

	width:620px;
	height:620px;

	border-radius:50%;

	background:
		radial-gradient(
			circle,
			var(--th-radial-primary),
			var(--th-color-transparent) 72%
		);

	filter:blur(50px);

	pointer-events:none;
	z-index:0;
}

/* =========================================================
	CONTENEDOR PRINCIPAL
========================================================= */

.th-login-shell{
	position:relative;
	z-index:2;

	width:100%;
	min-height:100vh;

	padding:40px 60px;
}

/* =========================================================
	TEXTO SELECCIONADO
========================================================= */

::selection{
	background:var(--th-ring-cyan-strong);
	color:var(--th-color-text-main);
}

/* =========================================================
	DARK MODE
========================================================= */

html[data-theme="dark"]{
	--th-login-bg:
		radial-gradient(circle at top left, var(--th-palette-rgb-132-255-056-a-2000), var(--th-color-transparent) 35%),
		radial-gradient(circle at bottom right, var(--th-palette-rgb-000-212-255-a-1800), var(--th-color-transparent) 40%),
		linear-gradient(135deg, var(--th-palette-rgb-002-006-023) 0%, var(--th-palette-rgb-003-019-038) 45%, var(--th-palette-rgb-002-006-023) 100%);

	--th-login-grid:var(--th-palette-rgb-255-255-255-a-0400);
	--th-login-text:var(--th-color-white);
}

html[data-theme="dark"] body{
	color:var(--th-login-text);
}

html[data-theme="dark"] body::after{
	background:
		radial-gradient(
			circle,
			var(--th-palette-rgb-132-255-056-a-2500),
			var(--th-color-transparent) 72%
		);
}

html[data-theme="dark"] ::selection{
	background:var(--th-palette-rgb-132-255-056-a-3500);
	color:var(--th-color-white);
}

/* =========================================================
	PUNTOS BRILLANTES LOGIN
========================================================= */

.th-login-sparkles{
	position:fixed;
	inset:0;
	z-index:1;
	pointer-events:none;
	overflow:hidden;
}

.th-login-sparkles span{
	position:absolute;
	width:5px;
	height:5px;
	border-radius:999px;

	background:var(--th-badge-text);

	box-shadow:
		0 0 10px var(--th-glow-indigo),
		0 0 22px var(--th-glow-cyan);

	opacity:.16;

	animation:thLoginSparkleBlink 3.8s ease-in-out infinite;
}

html[data-theme="dark"] .th-login-sparkles span{
	background:var(--th-palette-rgb-132-255-056);

	box-shadow:
		0 0 10px var(--th-palette-rgb-132-255-056-a-9500),
		0 0 22px var(--th-palette-rgb-132-255-056-a-6500),
		0 0 38px var(--th-palette-rgb-034-211-238-a-3500);
}

.th-login-sparkles span:nth-child(1){
	top:18%;
	left:13%;
	animation-delay:.2s;
}

.th-login-sparkles span:nth-child(2){
	top:30%;
	left:34%;
	width:4px;
	height:4px;
	animation-delay:1.1s;
}

.th-login-sparkles span:nth-child(3){
	top:54%;
	left:46%;
	animation-delay:2s;
}

.th-login-sparkles span:nth-child(4){
	top:72%;
	left:23%;
	width:4px;
	height:4px;
	animation-delay:.7s;
}

.th-login-sparkles span:nth-child(5){
	top:22%;
	right:18%;
	width:4px;
	height:4px;
	animation-delay:1.8s;
}

.th-login-sparkles span:nth-child(6){
	top:64%;
	right:12%;
	animation-delay:2.7s;
}

@keyframes thLoginSparkleBlink{

	0%,
	100%{
		opacity:.12;
		transform:scale(.65);
	}

	45%{
		opacity:1;
		transform:scale(1.5);
	}

	60%{
		opacity:.35;
		transform:scale(.9);
	}

}

/* =========================================================
	PREFERENCIAS LOGIN
========================================================= */

.th-preferences{
	position:fixed;
	top:22px;
	right:24px;
	z-index:50;
}

.th-preferences-main{
	background:var(--th-card-bg-glass);
	border:1px solid var(--th-border-glass);

	box-shadow:
		0 18px 38px var(--th-shadow-soft),
		0 0 28px var(--th-glow-cyan);

	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
}

.th-preferences-main:hover,
.th-preferences-main.is-active{
	border-color:var(--th-border-cyan);
	background:var(--th-card-bg-hover);
	color:var(--th-badge-text);
}

html[data-theme="dark"] .th-preferences-main{
	background:var(--th-palette-rgb-255-255-255-a-1000);
	border:1px solid var(--th-palette-rgb-132-255-056-a-2400);

	box-shadow:
		0 18px 38px var(--th-palette-rgb-000-000-000-a-2800),
		0 0 28px var(--th-palette-rgb-132-255-056-a-1400);
}

html[data-theme="dark"] .th-preferences-main:hover,
html[data-theme="dark"] .th-preferences-main.is-active{
	border-color:var(--th-palette-rgb-132-255-056-a-5500);
	background:var(--th-palette-rgb-132-255-056-a-1400);
	color:var(--th-palette-rgb-132-255-056);
}

.th-preferences-panel{
	top:56px;
	right:0;
}

.th-preferences-circle{
	background:var(--th-card-bg-glass);
	border-color:var(--th-border-glass);
	color:var(--th-color-text-main);
}

.th-preferences-circle:hover,
.th-preferences-circle.is-active{
	border-color:var(--th-border-cyan);
	background:var(--th-card-bg-hover);
	color:var(--th-badge-text);
}

html[data-theme="dark"] .th-preferences-circle{
	background:var(--th-palette-rgb-255-255-255-a-1000);
	border-color:var(--th-palette-rgb-255-255-255-a-1600);
	color:var(--th-color-white);
}

html[data-theme="dark"] .th-preferences-circle:hover,
html[data-theme="dark"] .th-preferences-circle.is-active{
	border-color:var(--th-palette-rgb-132-255-056-a-5500);
	background:var(--th-palette-rgb-132-255-056-a-1300);
	color:var(--th-palette-rgb-132-255-056);
}

.th-preferences-submenu{
	background:var(--th-card-bg-soft);
	border:1px solid var(--th-border-soft);

	box-shadow:
		0 22px 48px var(--th-shadow-soft);

	backdrop-filter:blur(20px);
	-webkit-backdrop-filter:blur(20px);
}

.th-preferences-submenu button{
	color:var(--th-color-text-soft);
}

.th-preferences-submenu button:hover,
.th-preferences-submenu button.active{
	background:var(--th-badge-bg);
	color:var(--th-badge-text);
}

html[data-theme="dark"] .th-preferences-submenu{
	background:var(--th-palette-rgb-002-006-023-a-9400);
	border:1px solid var(--th-palette-rgb-132-255-056-a-1800);

	box-shadow:
		0 22px 48px var(--th-palette-rgb-000-000-000-a-3600),
		0 0 26px var(--th-palette-rgb-132-255-056-a-1000);
}

html[data-theme="dark"] .th-preferences-submenu button{
	color:var(--th-announcement-text-muted);
}

html[data-theme="dark"] .th-preferences-submenu button:hover,
html[data-theme="dark"] .th-preferences-submenu button.active{
	background:var(--th-palette-rgb-132-255-056-a-1200);
	color:var(--th-palette-rgb-132-255-056);
}