/* ==========================================================================
   Telas de autenticação anônima — login, esqueciSenha, redefinirSenha
   REG-733: tratamento visual do fluxo de recuperação de senha.

   Por que este arquivo existe e não entrou no estilosRain.css: aquele arquivo
   é carregado por toda a aplicação (base.xhtml), e classes .auth-* / .login-*
   declaradas ali passariam a valer em qualquer tela. Aqui o escopo fica só
   nas três telas anônimas, que são as únicas que carregam este CSS.

   Cores saem das custom properties do tema ativo (joinfaces.primefaces.theme,
   hoje freya-green-light) para que trocar o tema não deixe o card fora de tom.
   O hex é apenas fallback, caso o theme.css não tenha carregado.

   ATENÇÃO às variáveis --auth-*-tint abaixo: CSS puro não deriva um rgba() a
   partir de um hex guardado em custom property (isso exigiria color-mix(), que
   preferimos evitar aqui pelo suporte legado sinalizado no X-UA-Compatible das
   páginas). Então os tons translúcidos estão fixos e espelham o
   --primary-color do tema verde. Ao trocar o tema, ajustar estes dois valores.
   ========================================================================== */

.login-body {
	--auth-primary-tint: rgba(52, 181, 111, 0.10);
	--auth-primary-ring: rgba(52, 181, 111, 0.18);
}

/* --------------------------------------------------------------------------
   Card
   Fica dentro do .login-panel do Freya, preservando o fundo com imagem
   (.fullbackground-container) que já vinha do estilosRain.css.
   -------------------------------------------------------------------------- */

.login-body .auth-card {
	background: var(--surface-card, #ffffff);
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(41, 50, 65, 0.12);
	padding: 32px 28px 26px;
	width: 100%;
	max-width: 420px;
	margin: 0 16px;
	box-sizing: border-box;
	text-align: center;
}

.login-body .auth-card .auth-logo {
	max-width: 200px;
	height: auto;
	margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Ícone-herói

   O círculo é preenchido com a cor sólida (e o ícone em branco) em vez de um
   fundo translúcido: assim o realce não depende de derivar alpha do tema.
   -------------------------------------------------------------------------- */

.login-body .auth-hero {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 14px auto 18px;
}

.login-body .auth-hero i {
	font-size: 26px;
	color: #ffffff;
}

.login-body .auth-hero-primary {
	background: var(--primary-color, #34B56F);
}

.login-body .auth-hero-success {
	background: var(--green-500, #4caf50);
}

.login-body .auth-hero-warn {
	background: var(--orange-500, #FF9800);
}

/* --------------------------------------------------------------------------
   Tipografia do card
   -------------------------------------------------------------------------- */

.login-body .auth-card .auth-title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	color: var(--text-color, #69707A);
}

.login-body .auth-card .auth-subtitle {
	margin: 0 0 22px;
	font-size: 13px;
	line-height: 20px;
	color: var(--text-color-secondary, #83888F);
}

/* --------------------------------------------------------------------------
   Campos

   O ícone é posicionado por conta própria em vez de usar p:inputGroup ou as
   classes ui-input-icon-* do PrimeFaces: a versão do PrimeFaces não está
   fixada no pom deste projeto, e não queremos que a tela dependa da
   disponibilidade daquele componente.

   Estes seletores também suprem o que o Freya deixa de aplicar: as regras do
   tema são .login-panel > input / > button (filho direto), e dentro do card
   os componentes não são mais filhos diretos do .login-panel.
   -------------------------------------------------------------------------- */

.login-body .auth-field {
	position: relative;
	display: block;
	margin-bottom: 14px;
}

.login-body .auth-field > i {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: var(--text-color-secondary, #83888F);
	pointer-events: none;
	z-index: 1;
}

.login-body .auth-field input {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 13px 13px 13px 38px;
	font-size: 14px;
	color: #515C66;
	background-color: #F6F7F7;
	border: 1.2px solid var(--surface-border, #D4D6D9);
	border-radius: var(--border-radius, 6px);
	transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.login-body .auth-field input::placeholder {
	color: rgba(41, 50, 65, 0.4);
}

.login-body .auth-field input:enabled:hover {
	border-color: var(--text-color-secondary, #83888F);
}

.login-body .auth-field input:enabled:focus {
	outline: 0 none;
	background-color: #ffffff;
	border-color: var(--primary-color, #34B56F);
	box-shadow: 0 0 0 3px var(--auth-primary-ring);
}

/*
	O p:selectOneMenu não renderiza um <input> visível: o componente é uma <div>
	.ui-selectonemenu com um <span> .ui-selectonemenu-label dentro e o <select>
	real escondido. Por isso nenhuma das regras .auth-field input acima o
	alcançava, e o seletor de empresa saía com a caixa do tema — mais baixo que
	o campo de login, com a largura do conteúdo e, por causa do text-align:center
	do card, recuado ~30px em relação a ele. Estas regras dão ao componente a
	mesma caixa do input: largura total, mesma altura, mesma calha de ícone.
*/
.login-body .auth-field .ui-selectonemenu {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	background-color: #F6F7F7;
	border: 1.2px solid var(--surface-border, #D4D6D9);
	border-radius: var(--border-radius, 6px);
	transition: background-color .2s, border-color .2s, box-shadow .2s;
}

/*
	O rótulo é quem carrega o padding: a calha de 38px à esquerda é do ícone da
	.auth-field, e a de 36px à direita é da seta, que o tema posiciona absoluta
	com 33px de largura.
*/
.login-body .auth-field .ui-selectonemenu .ui-selectonemenu-label {
	padding: 13px 36px 13px 38px;
	font-size: 14px;
	color: #515C66;
	text-align: left;
	background: transparent;
	border: 0 none;
	border-radius: inherit;
}

/*
	Com nada escolhido, o rótulo tem que ter o tom de placeholder do input ao
	lado — senão o seletor parece preenchido enquanto o campo de login parece
	vazio, que era a diferença que sobrava entre os dois.

	Não dá para usar a classe .ui-selectonemenu-label-placeholder do PrimeFaces:
	ela só aparece quando o componente está mostrando o atributo `placeholder`, e
	aqui quem está selecionado é o f:selectItem de valor nulo — para o PrimeFaces
	isso é uma escolha de verdade, não a ausência de escolha. Verificado no
	navegador: mesmo declarando `placeholder`, a classe não é aplicada.

	Daí o :has() sobre o <select> escondido, que é quem carrega o valor real. Em
	navegador sem :has() (anterior ao Chrome 105 / Safari 15.4 / Firefox 121) a
	regra inteira é ignorada e o rótulo fica no tom escuro de antes — por isso o
	padrão acima continua sendo o do valor preenchido, e não o do placeholder:
	a degradação deixa o texto escuro demais, nunca apagado demais.
*/
.login-body .auth-field .ui-selectonemenu:has(select option[value=""]:checked) .ui-selectonemenu-label {
	color: rgba(41, 50, 65, 0.4);
}

.login-body .auth-field .ui-selectonemenu:not(.ui-state-disabled):hover {
	border-color: var(--text-color-secondary, #83888F);
}

/*
	:focus-within além do .ui-state-focus porque quem recebe o foco de teclado é
	o <span> do rótulo (tabindex=0) — o PrimeFaces nem sempre marca a div externa.
*/
.login-body .auth-field .ui-selectonemenu.ui-state-focus,
.login-body .auth-field .ui-selectonemenu:focus-within {
	background-color: #ffffff;
	border-color: var(--primary-color, #34B56F);
	box-shadow: 0 0 0 3px var(--auth-primary-ring);
}

/* --------------------------------------------------------------------------
   Botões do card
   -------------------------------------------------------------------------- */

/*
	O botão é flex e centraliza ícone + rótulo como um grupo. Antes o rótulo
	ocupava a largura toda (display:block) e ficava centralizado sozinho,
	enquanto o tema mantinha o ícone absoluto colado na borda esquerda — o
	"ENVIAR" aparecia no meio e o avião lá na ponta, com um vão entre os dois.
*/
.login-body .auth-card .ui-button.auth-btn {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	margin: 4px 0 0;
	padding: 14px 20px;
	border-radius: var(--border-radius, 6px);
	transition: filter .2s, background-color .2s;
}

/* Tira o ícone do posicionamento absoluto do tema e devolve ao fluxo do flex. */
.login-body .auth-card .ui-button.auth-btn .ui-button-icon-left {
	position: static;
	left: auto;
	top: auto;
	margin: 0 10px 0 0;
	font-size: 14px;
}

.login-body .auth-card .ui-button.auth-btn .ui-button-text {
	display: block;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
}

.login-body .auth-card .ui-button.auth-btn:enabled:hover {
	filter: brightness(0.94);
}

.login-body .auth-card .ui-button.auth-btn-secondary {
	background: transparent;
	color: var(--primary-color, #34B56F);
	border: 1px solid var(--primary-color, #34B56F);
}

.login-body .auth-card .ui-button.auth-btn-secondary:enabled:hover {
	filter: none;
	background: var(--auth-primary-tint);
	color: var(--primary-color, #34B56F);
}

/* --------------------------------------------------------------------------
   "Voltar ao login"

   É um p:commandLink (não um p:commandButton) para renderizar um <a> de
   verdade e ainda assim continuar acionando o voltarLogin() do MBean, em vez
   de deixar aquele método sem uso.
   -------------------------------------------------------------------------- */

.login-body .auth-card .auth-back {
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-align: center;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-color-secondary, #83888F);
	text-decoration: none;
	cursor: pointer;
	transition: color .2s;
}

.login-body .auth-card .auth-back:hover {
	color: var(--primary-color, #34B56F);
	text-decoration: none;
}

.login-body .auth-card .auth-back i {
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   Mensagens dentro do card

   O p:messages fica fora dos painéis condicionais de estado, porque ele usa
   p:autoUpdate e precisa existir na árvore em todos os estados da tela.
   -------------------------------------------------------------------------- */

.login-body .auth-card .ui-messages {
	margin: 16px 0 0;
	text-align: left;
}

/*
	O tema renderiza o ícone da mensagem como float, e o float empurra para a
	direita todas as linhas que ele atravessa — o resumo e a PRIMEIRA linha do
	detalhe saíam recuados, com o resto do parágrafo alinhado à esquerda.
	display:block no detalhe não resolve (o float continua ocupando a linha).

	A correção é tirar o ícone do fluxo e dar a ele uma calha própria: a caixa
	ganha padding à esquerda e o ícone é posicionado dentro desse espaço, de modo
	que resumo e detalhe compartilhem a mesma margem esquerda.
*/
.login-body .auth-card .ui-messages > div {
	position: relative;
	margin: 0;
	padding: 12px 14px 12px 42px;
	font-size: 13px;
	line-height: 19px;
	border-radius: var(--border-radius, 6px);
}

.login-body .auth-card .ui-messages > div > .ui-messages-info-icon,
.login-body .auth-card .ui-messages > div > .ui-messages-warn-icon,
.login-body .auth-card .ui-messages > div > .ui-messages-error-icon,
.login-body .auth-card .ui-messages > div > .ui-messages-fatal-icon {
	position: absolute;
	left: 14px;
	top: 12px;
	float: none;
	margin: 0;
}

.login-body .auth-card .ui-messages .ui-messages-info-summary,
.login-body .auth-card .ui-messages .ui-messages-warn-summary,
.login-body .auth-card .ui-messages .ui-messages-error-summary,
.login-body .auth-card .ui-messages .ui-messages-info-detail,
.login-body .auth-card .ui-messages .ui-messages-warn-detail,
.login-body .auth-card .ui-messages .ui-messages-error-detail {
	display: block;
}

.login-body .auth-card .ui-messages .ui-messages-info-summary,
.login-body .auth-card .ui-messages .ui-messages-warn-summary,
.login-body .auth-card .ui-messages .ui-messages-error-summary {
	margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   login.xhtml — link "Esqueceu a senha?" e divisor

   Esta tela NÃO recebe o card: ela já está estável em produção e a mudança
   aqui é deliberadamente restrita ao link e ao divisor.

   O link mora dentro de um p:outputPanel layout="block" (um <div>), então a
   regra .login-panel > a do Freya — 10px, cinza 30% — não o alcança e não
   precisa ser sobrescrita.
   -------------------------------------------------------------------------- */

.login-body .auth-forgot {
	margin: 14px 0 2px;
}

/*
	O link e o divisor ficam sobre a fotografia do .fullbackground-container, não
	sobre uma superfície sólida. Verde sobre foto clara e ruidosa tem contraste
	fraco, e o "ou" praticamente desaparecia. Por isso ambos recebem um fundo
	branco translúcido — a mesma solução que os inputs do Freya já usam com o
	#F6F7F7 sólido, e que mantém o texto legível sobre qualquer imagem de fundo.

	A pastilha é deliberadamente mais leve que os botões da coluna: peso 500 (não
	600) e sem preenchimento sólido de cor. Empilhada logo abaixo do LOGIN e logo
	acima do "Login com Azure AD", com o peso de botão que tinha antes ela virava
	um terceiro botão e a tela ficava sem hierarquia — são três ações seguidas, e
	só uma delas é a principal. A sombra rasa resolve o problema oposto: sem ela o
	retângulo branco parecia um adesivo solto sobre a foto.

	O fundo é branco sólido, e não translúcido: a 82% a fotografia atravessava e
	deixava a pastilha acinzentada, de modo que o hover a *clareava* — o inverso
	do resto da tela, onde os botões são claros em repouso e escurecem sob o
	mouse.
*/
.login-body .auth-forgot-link {
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 500;
	color: var(--primary-color, #34B56F);
	text-decoration: none;
	background-color: #ffffff;
	border: 0 none;
	border-radius: 20px;
	box-shadow: 0 1px 4px rgba(41, 50, 65, 0.10);
	transition: filter .2s;
}

/*
	Mesmo mecanismo de hover dos botões desta tela (.auth-btn e o do SSO usam
	exatamente este brightness), para que a pastilha escureça junto com eles em
	vez de reagir na direção contrária. O sublinhado saiu: antes o hover mudava
	fundo, sombra E sublinhado de uma vez.
*/
.login-body .auth-forgot-link:hover {
	filter: brightness(0.94);
	text-decoration: none;
}

/*
	O foco por teclado precisa de marca própria: o :hover acima é sutil demais
	para servir de indicador, e o outline padrão do navegador some contra a foto.
*/
.login-body .auth-forgot-link:focus-visible {
	outline: 2px solid var(--primary-color, #34B56F);
	outline-offset: 2px;
}

.login-body .auth-forgot-link i {
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   login.xhtml — bloco do SSO

   O Freya dimensiona a coluna do login por filho direto (.login-panel > button,
   85% até 247px). O botão do Azure AD está dentro de um p:outputPanel, então
   ficava com a largura do próprio conteúdo — ~175px contra os 247px do LOGIN,
   deixando a coluna desalinhada justamente em volta do "Esqueceu a senha?".
   O wrapper recebe a medida do Freya e repassa ao botão.
   -------------------------------------------------------------------------- */

.login-body .auth-sso {
	width: 85%;
	max-width: 247px;
}

.login-body .auth-sso .ui-button {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	padding: 15px 20px;
}

/* Mesmo ajuste dos botões do card: ícone no fluxo, junto do rótulo. */
.login-body .auth-sso .ui-button .ui-button-icon-left {
	position: static;
	left: auto;
	top: auto;
	margin: 0 10px 0 0;
	font-size: 14px;
}

.login-body .auth-sso .ui-button .ui-button-text {
	display: block;
	padding: 0;
	font-weight: 600;
	font-size: 14px;
	line-height: 16px;
}

.login-body .auth-divider {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	width: 85%;
	max-width: 247px;
	margin: 16px 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-color, #69707A);
}

.login-body .auth-divider::before, .login-body .auth-divider::after {
	content: "";
	-ms-flex: 1;
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.75);
}

.login-body .auth-divider span {
	padding: 2px 12px;
	background-color: rgba(255, 255, 255, 0.88);
	border-radius: 10px;
	margin: 0 8px;
}

/* --------------------------------------------------------------------------
   Responsivo

   O Freya já leva o .login-panel a 100% abaixo de 992px; aqui só garantimos
   que o card encolha junto em telas estreitas.
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.login-body .auth-card {
		padding: 24px 18px 20px;
		margin: 0 12px;
	}
	.login-body .auth-hero {
		width: 56px;
		height: 56px;
		margin: 10px auto 14px;
	}
	.login-body .auth-hero i {
		font-size: 23px;
	}
	.login-body .auth-card .auth-title {
		font-size: 18px;
	}
}