/*
 * BRACCA — tela de login (custom). Consome o design system (.brc-app).
 * Layout do Figma (frame "Login / Register"): foto à esquerda sobre navy com
 * gradiente escuro; à direita, coluna com logo + seletor de idioma e card
 * branco com a barra tricolor no topo.
 */

html, body.brc-login-page {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

.brc-app.brc-login {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/* Painel da foto */
.brc-app .brc-login__panel {
	position: relative;
	overflow: hidden;
	background: var( --brc-navy-700, #142241 );
}
.brc-app .brc-login__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.brc-app .brc-login__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 249deg, rgba( 0, 0, 0, 0 ) 35%, rgba( 0, 0, 0, 0.2 ) 56%, rgba( 0, 0, 0, 0.7 ) 100% );
}

/* Lado do formulário */
.brc-app .brc-login__main {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	background: var( --brc-subtle, #e8ebef );
}
.brc-app .brc-login__col {
	width: 100%;
	max-width: 457px;
}

/* Barra superior da coluna: logo à esquerda, idioma à direita */
.brc-app .brc-login__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.brc-app .brc-login__bar .brc-brand__img { height: 55px; } /* desktop = altura do header do site (Elementor) */

.brc-app .brc-login__card {
	width: 100%;
	padding: 49px 32px 39px; /* 10px da barra tricolor + 39px */
}
.brc-app .brc-login__title {
	font-family: var( --brc-font-title );
	font-size: 32px;
	font-weight: 500;
	line-height: 42px;
	color: var( --brc-black, #000000 );
}
.brc-app .brc-login__sub {
	color: var( --brc-muted );
	font-size: 14px;
	margin-top: 6px;
}
.brc-app .brc-login__card form,
.brc-app .brc-login__card .brc-alert {
	margin-top: var( --brc-sp-5, 24px );
}
.brc-app .brc-login__card .brc-alert { margin-bottom: 0; }
.brc-app .brc-login__card .brc-field { margin-bottom: var( --brc-sp-5, 24px ); }

.brc-app .brc-login__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 var( --brc-sp-5, 24px );
	font-size: 16px;
}
.brc-app .brc-login__row .brc-check { font-size: 16px; color: var( --brc-ink ); }
.brc-app .brc-login__forgot {
	color: var( --brc-muted, #4d4d4d );
	text-decoration: underline;
	text-underline-position: from-font;
}
.brc-app .brc-login__forgot:hover { color: var( --brc-ink ); }

.brc-app .brc-login__foot {
	margin: var( --brc-sp-5, 24px ) 0 0;
	text-align: center;
	font-size: 16px;
	color: var( --brc-muted, #4d4d4d );
}
.brc-app .brc-login__foot a {
	color: var( --brc-black, #000000 );
	font-weight: 600;
	text-decoration: underline;
	text-underline-position: from-font;
}

/* Campo de senha com botão de mostrar/ocultar (ícone de olho) */
.brc-app .brc-pwd {
	position: relative;
}
.brc-app .brc-pwd .brc-input {
	padding-right: 52px;
}
.brc-app .brc-pwd__toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY( -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: none;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var( --brc-muted, #4d4d4d );
}
.brc-app .brc-pwd__toggle:hover { color: var( --brc-ink ); }

/* Responsivo: esconde a foto em telas pequenas */
@media ( max-width: 880px ) {
	.brc-app.brc-login {
		grid-template-columns: 1fr;
	}
	.brc-app .brc-login__panel {
		display: none;
	}
	/* Evita zoom automático do iOS em inputs < 16px */
	.brc-app .brc-input { font-size: 16px; }
	.brc-app .brc-login__bar .brc-brand__img { height: 41px; } /* mobile mantém compacto */
}