/* [CLEITON 23/09/2026] Fundo da tela de login (69777). A cor vem de --tema-cor-primaria, definida pela PKG_TEMA
   [CLEITON 29/09/2026] Fica no Static Workspace Files e é carregado pela PKG_TEMA só com tema ativo. O html na frente
   dos seletores é porque o arquivo entra antes do CSS do tema e perderia nos empates */
html .t-PageBody--login {
	--tema-login-cor: var(--tema-cor-primaria, #AFFF04);
	--ut-login-page-background-color: #0C0C0C;
	background-image:
		radial-gradient(ellipse 30% 55% at 97% 45%, rgba(255, 255, 255, .055), transparent 70%),
		radial-gradient(ellipse 80% 80% at 60% 35%, #1C1D1D 0%, #121212 55%, #0A0A0A 100%);
	background-attachment: fixed;
}

html .t-PageBody--login::before,
html .t-PageBody--login::after {
	content: "";
	position: fixed;
	pointer-events: none;
	z-index: 0;
}

/* placa diagonal da esquerda com o brilho; o mask corta a diagonal */
html .t-PageBody--login::before {
	top: 12vh;
	left: 0;
	width: 43vw;
	height: 88vh;
	background:
		radial-gradient(ellipse 75% 50% at 0% 60%, var(--tema-login-cor) 0%, color-mix(in srgb, var(--tema-login-cor) 60%, transparent) 20%, color-mix(in srgb, var(--tema-login-cor) 22%, transparent) 50%, transparent 85%),
		linear-gradient(to bottom, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 70%);
	-webkit-mask-image: linear-gradient(to top right, #000 50%, transparent 50.15%);
	mask-image: linear-gradient(to top right, #000 50%, transparent 50.15%);
}

/* lâmina do canto inferior direito, com a borda mais clara */
html .t-PageBody--login::after {
	right: 0;
	bottom: 0;
	width: 15vw;
	height: 28vh;
	background: linear-gradient(to bottom right, transparent 50%, var(--tema-login-cor) 50.3%, color-mix(in srgb, var(--tema-login-cor) 45%, transparent) 58%, color-mix(in srgb, var(--tema-login-cor) 12%, transparent) 100%);
}

html .t-PageBody--login .t-Login-container {
	position: relative;
	z-index: 1;
}

html .t-PageBody--login .t-Login-region {
	--ut-login-region-background-color: rgba(30, 30, 30, .55);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 20px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
	backdrop-filter: blur(14px);
}

html .t-PageBody--login .t-Login-region .t-Button {
	border-radius: 8px;
}

/* campos do login arredondados e com borda suave, como no mockup; o foco continua na cor do tema */
html .t-PageBody--login .t-Login-body {
	--a-field-input-border-radius: 8px;
	--a-field-input-border-color: rgba(255, 255, 255, .12);
	--a-field-input-background-color: rgba(0, 0, 0, .28);
}

/* olho da senha dentro do campo, sem fundo */
html .t-PageBody--login .apex-item-group--password {
	position: relative;
}

html .t-PageBody--login .apex-item-group--password .apex-item-text {
	border-radius: var(--a-field-input-border-radius, 8px);
	padding-inline-end: 2.75rem;
}

html .t-PageBody--login .t-Button--passwordVisibility {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	--a-button-background-color: transparent;
	--a-button-hover-background-color: transparent;
	--a-button-active-background-color: transparent;
	--a-button-border-color: transparent;
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

/* [CLEITON 29/09/2026] o grupo da senha é relative (por causa do olho) e ficava por cima da chave; no foco o campo fica
   opaco e a chave sumia */
html .t-PageBody--login .t-Form-itemWrapper > .apex-item-icon {
	z-index: 2;
}

/* subtítulo abaixo do título do cartão (Header Text da região de login) */
html .t-PageBody--login .tema-login-subtitulo {
	margin: -2.25rem 0 1.5rem;
	text-align: center;
	font-size: .875rem;
	color: rgba(236, 236, 236, .6);
}

/* textos e marcas dos cantos (região Cantos da 9999); a logo do canto vem do process Aplicar Tema.
   Medidas tiradas do mockup, em proporção da tela */
html .tema-login-cantos {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	color: #ECECEC;
}

html .tema-login-logo-sistema {
	position: absolute;
	top: 5.8vh;
	left: 4.5vw;
	width: clamp(150px, 10.5vw, 240px);
	height: clamp(30px, 2.15vw, 48px);
}

html .tema-login-marca {
	position: absolute;
	top: 6.3vh;
	right: 4.9vw;
	height: clamp(18px, 1.7vw, 34px);
	width: auto;
}

html .tema-login-texto {
	position: absolute;
	line-height: 1.3;
}

html .tema-login-texto p {
	margin: 0;
}

html .tema-login-texto--esquerda {
	left: 4.5vw;
	bottom: 5.5vh;
	font-size: clamp(13px, 1.4vw, 28px);
}

html .tema-login-texto--esquerda p {
	color: rgba(236, 236, 236, .55);
}

html .tema-login-marca-pequena {
	display: block;
	height: clamp(18px, 1.8vw, 36px);
	width: auto;
	margin-bottom: .5em;
}

html .tema-login-texto--direita {
	right: 6.8vw;
	bottom: 12.5vh;
	font-size: clamp(14px, 1.75vw, 34px);
}

html .tema-login-traco {
	display: block;
	width: 1.2em;
	height: clamp(3px, .25vw, 5px);
	margin-top: 1.2em;
	background: var(--tema-login-cor);
}

/* cartão cresce com a altura da tela (no mockup ocupa ~75% da altura) */
@media (min-width: 1200px) and (min-height: 700px) {
	html .t-PageBody--login .t-Login-region {
		zoom: 1.15;
	}
}

@media (min-width: 1300px) and (min-height: 780px) {
	html .t-PageBody--login .t-Login-region {
		zoom: 1.25;
	}
}

@media (min-width: 1450px) and (min-height: 860px) {
	html .t-PageBody--login .t-Login-region {
		zoom: 1.38;
	}
}

@media (min-width: 1600px) and (min-height: 930px) {
	html .t-PageBody--login .t-Login-region {
		zoom: 1.5;
	}
}

@media (min-width: 1800px) and (min-height: 1030px) {
	html .t-PageBody--login .t-Login-region {
		zoom: 1.65;
	}
}

@media (max-width: 768px) {
	html .tema-login-cantos {
		display: none;
	}
}

/* [CLEITON 29/09/2026] modo claro, como no mockup claro: fundo cinza-claro, cartão branco e textos escuros.
   [CLEITON 01/10/2026] Claro é todo style que não é dark (Regente - Light, Iris...): o body não tem classe com -dark */
html .t-PageBody--login:not([class*="-dark"]) {
	--ut-login-page-background-color: #EDEDED;
	background-image:
		radial-gradient(ellipse 30% 55% at 97% 45%, rgba(255, 255, 255, .8), transparent 70%),
		radial-gradient(ellipse 80% 80% at 60% 35%, #FAFAFA 0%, #F0F0F0 55%, #E4E4E4 100%);
}

html .t-PageBody--login:not([class*="-dark"])::before {
	background:
		radial-gradient(ellipse 75% 50% at 0% 60%, color-mix(in srgb, var(--tema-login-cor) 75%, transparent) 0%, color-mix(in srgb, var(--tema-login-cor) 40%, transparent) 25%, color-mix(in srgb, var(--tema-login-cor) 12%, transparent) 55%, transparent 85%),
		linear-gradient(to bottom, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, .35) 70%);
}

html .t-PageBody--login:not([class*="-dark"])::after {
	background: linear-gradient(to bottom right, transparent 50%, color-mix(in srgb, var(--tema-login-cor) 75%, transparent) 50.3%, color-mix(in srgb, var(--tema-login-cor) 30%, transparent) 58%, color-mix(in srgb, var(--tema-login-cor) 6%, transparent) 100%);
}

html .t-PageBody--login:not([class*="-dark"]) .t-Login-region {
	--ut-login-region-background-color: rgba(255, 255, 255, .85);
	border-color: rgba(0, 0, 0, .06);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .10);
	color: #262626;
}

html .t-PageBody--login:not([class*="-dark"]) .t-Login-body {
	--a-field-input-border-color: rgba(0, 0, 0, .12);
	--a-field-input-background-color: #FFFFFF;
}

html body:not([class*="-dark"]) .tema-login-cantos {
	color: #262626;
}

html body:not([class*="-dark"]) .tema-login-texto--esquerda p {
	color: rgba(38, 38, 38, .6);
}

html body:not([class*="-dark"]) .tema-login-subtitulo {
	color: rgba(38, 38, 38, .6);
}

/* a marca vem em branco; no claro ela vira grafite (#262626) */
html body:not([class*="-dark"]) .tema-login-marca,
html body:not([class*="-dark"]) .tema-login-marca-pequena {
	filter: brightness(0) invert(15%);
}