/* ============================================================================
   estilo-login.css — VISUAL DA TELA DE LOGIN
   ----------------------------------------------------------------------------
   LEGENDA: paleta escura (roxo + verde) vinda do layout "projeto novo".
   As cores ficam em variáveis no :root para serem reaproveitadas pelo painel.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--fundo:        #201b2c;
	--cartao:       #2f2841;
	--campo:        #514869;
	--texto:        #f0ffffde;
	--texto-fraco:  #f0ffff94;
	--destaque:     #00ff88;
	--destaque-2:   #77ffc0;
	--escuro:       #2b134b;
	--erro:         #ff6b6b;
	--sombra:       0px 10px 40px #00000056;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: 'Noto Sans', sans-serif;
	background: var(--fundo);
	color: var(--texto);
}

/* ---------------------------------------------------------------- estrutura */

.main-login {
	width: 100%;
	min-height: 100vh;
	background: var(--fundo);
	display: flex;
	justify-content: center;
	align-items: center;
}

.left-login {
	width: 50vw;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 20px;
}

.left-login > h1 {
	font-size: 2.6vw;
	line-height: 1.3;
	color: var(--destaque-2);
	margin: 0 0 20px 0;
	text-align: center;
}

.left-login-image {
	width: 35vw;
	max-width: 520px;
}

.right-login {
	width: 50vw;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

/* ------------------------------------------------------------------- cartão */

.card-login {
	width: 60%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 30px 35px;
	background: var(--cartao);
	border-radius: 20px;
	box-shadow: var(--sombra);
}

.card-login > h1 {
	color: var(--destaque);
	font-weight: 800;
	margin: 0;
	letter-spacing: 2px;
}

.subtitulo-login {
	color: var(--texto-fraco);
	font-size: 11pt;
	margin: 6px 0 18px 0;
	text-align: center;
}

/* ------------------------------------------------------------------- campos */

.textfield {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	margin: 10px 0px;
}

.textfield > label {
	color: var(--texto);
	margin-bottom: 10px;
	font-size: 10pt;
}

.textfield > input,
.textfield > select {
	width: 100%;
	border: 2px solid transparent;
	border-radius: 10px;
	padding: 15px;
	background: var(--campo);
	color: var(--texto);
	font-family: inherit;
	font-size: 12pt;
	box-shadow: var(--sombra);
	outline: none;
	transition: border-color .2s;
}

.textfield > input::placeholder { color: var(--texto-fraco); }

.textfield > input:focus,
.textfield > select:focus { border-color: var(--destaque); }

/* -------------------------------------------------------------------- botão */

.btn-login {
	width: 100%;
	padding: 16px 0px;
	margin: 25px 0px 0px 0px;
	border: none;
	border-radius: 8px;
	outline: none;
	text-transform: uppercase;
	font-family: inherit;
	font-size: 11pt;
	font-weight: 800;
	letter-spacing: 3px;
	color: var(--escuro);
	background: var(--destaque);
	cursor: pointer;
	box-shadow: 0px 10px 40px -12px #00ff8052;
	transition: filter .2s, transform .1s;
}

.btn-login:hover  { filter: brightness(1.1); }
.btn-login:active { transform: translateY(1px); }

.btn-pequeno { margin: 0; padding: 12px 24px; width: auto; }

/* ------------------------------------------------------------------- avisos */

.recuperar { margin: 18px 0 0 0; }

.recuperar > a {
	color: var(--texto-fraco);
	font-size: 10pt;
	text-decoration: none;
}

.recuperar > a:hover { color: var(--destaque); text-decoration: underline; }

.alerta {
	width: 100%;
	padding: 12px 15px;
	border-radius: 10px;
	font-size: 10pt;
	margin-bottom: 8px;
	text-align: center;
}

.alerta-erro    { background: #4a1f2b; color: var(--erro); }
.alerta-sucesso { background: #163c2d; color: var(--destaque); }

/* -------------------------------------------------------------------- modal */

.modal {
	display: none;
	position: fixed;
	inset: 0;
	background: #00000099;
	z-index: 50;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.modal.aberto { display: flex; }

.modal-caixa {
	width: 100%;
	max-width: 420px;
	background: var(--cartao);
	border-radius: 20px;
	box-shadow: var(--sombra);
	overflow: hidden;
}

.modal-topo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 25px 0 25px;
}

.modal-topo > h2 { margin: 0; font-size: 14pt; color: var(--destaque); }

.modal-fechar {
	background: none;
	border: none;
	color: var(--texto-fraco);
	font-size: 22pt;
	line-height: 1;
	cursor: pointer;
}

.modal-fechar:hover { color: var(--texto); }

.modal-corpo   { padding: 10px 25px 20px 25px; }
.modal-rodape  { padding: 0 25px 25px 25px; text-align: right; }
.modal-texto   { color: var(--texto-fraco); font-size: 10pt; line-height: 1.5; }

.mensagem-recuperar { font-size: 10pt; margin-top: 12px; text-align: center; min-height: 18px; }
.mensagem-recuperar.sucesso { color: var(--destaque); }
.mensagem-recuperar.erro    { color: var(--erro); }

/* ----------------------------------------------------------- responsividade */

@media only screen and (max-width: 950px) {
	.card-login { width: 85%; }
	.left-login > h1 { font-size: 3.2vw; }
}

@media only screen and (max-width: 600px) {
	.main-login {
		flex-direction: column;
		padding: 30px 0;
	}

	.left-login > h1 { display: none; }

	.left-login {
		width: 100%;
		min-height: auto;
	}

	.left-login-image { width: 55vw; }

	.right-login {
		width: 100%;
		min-height: auto;
	}

	.card-login { width: 90%; }
}