/* ==========================================================================
   LOGIN — visual sóbrio (carregado só em login.php, depois do ultra.css)
   Para voltar ao visual anterior: troque css/login.css por css/login-ultra.css no login.php.
   ========================================================================== */

:root {
	--lg-bg: #09090b;
	--lg-sup: #111113;
	--lg-sup2: #17171a;
	--lg-ink: #fafafa;
	--lg-ink-2: #a1a1aa;
	--lg-ink-3: #71717a;
	--lg-line: rgba(255, 255, 255, .08);
	--lg-line-2: rgba(255, 255, 255, .14);
	--lg-green: #4ade80;
	--lg-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html.body-full-height, html.body-full-height body, html, body {
	min-height: 100%;
	background: var(--lg-bg) !important;
}
body { font-family: var(--lg-font); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; color: var(--lg-ink); }

/* ---------- palco: duas colunas ---------- */
.login-container {
	position: relative;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 100vh;
	padding: 0 !important;
	background: var(--lg-bg) !important;
	align-items: stretch !important;
	animation: none !important;
}
.login-container:before, .login-container:after, .login-orb, .login-grade { display: none !important; }

/* ---------- coluna de apresentação ---------- */
.login-showcase {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px max(40px, 6vw);
	background: var(--lg-sup) radial-gradient(800px 400px at 0% 0%, rgba(255, 255, 255, .05), transparent 70%);
	border-right: 1px solid var(--lg-line);
	animation: none !important;
}
.login-emblema {
	display: block;
	width: 56px; height: 56px;
	margin: 0 0 40px;
	object-fit: contain;
	filter: none !important;
	animation: none !important;
}
.login-selo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--lg-ink-2);
	background: transparent;
	border: 1px solid var(--lg-line-2);
}
.login-selo i { width: 7px; height: 7px; border-radius: 50%; background: var(--lg-green); animation: none !important; box-shadow: none !important; }
.login-showcase h2 {
	margin: 22px 0 16px !important;
	max-width: 520px;
	font-family: var(--lg-font) !important;
	font-size: clamp(34px, 3.6vw, 50px) !important;
	line-height: 1.06 !important;
	font-weight: 600 !important;
	letter-spacing: -.04em !important;
	color: var(--lg-ink) !important;
}
.login-showcase h2 span {
	background: none !important;
	-webkit-text-fill-color: currentColor !important;
	color: var(--lg-ink-3) !important;
	animation: none !important;
}
.login-showcase p { margin: 0 0 40px; max-width: 460px; font-size: 16px; line-height: 1.6; color: var(--lg-ink-2); }
.login-recursos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 460px; border-top: 1px solid var(--lg-line); }
.login-recursos li { display: flex; align-items: center; gap: 14px; padding: 14px 0; font-size: 14px; color: var(--lg-ink-2); border-bottom: 1px solid var(--lg-line); }
.login-recursos li .fa {
	width: 30px; height: 30px; flex: 0 0 30px;
	display: grid; place-items: center;
	border-radius: 8px;
	font-size: 13px;
	color: var(--lg-ink) !important;
	background: var(--lg-sup2) !important;
	border: 1px solid var(--lg-line) !important;
	box-shadow: none !important;
}

/* ---------- coluna do formulário ---------- */
.login-container .login-box {
	align-self: center;
	justify-self: center;
	position: relative;
	width: 100%;
	max-width: 380px !important;
	margin: 0 !important;
	padding: 48px 0 !important;
	animation: lgEntra .5s cubic-bezier(.2, .7, .2, 1) both !important;
}
@keyframes lgEntra { from { opacity: 0; } to { opacity: 1; } }

.login-container .login-box .login-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 2px !important;
	padding: 0 !important;
	height: auto !important;
	text-align: left !important;
	font-family: var(--lg-font);
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: -.01em;
	color: var(--lg-ink) !important;
	background: none !important;
}
.login-container .login-box .login-logo:before {
	content: "";
	flex: none;
	width: 28px; height: 28px;
	background: url(../img/logo-sistema-256.png) center / contain no-repeat;
	box-shadow: none; filter: none; border-radius: 0;
}
.login-container .login-box .login-legenda { display: none; }

.login-container .login-box .login-body {
	position: relative;
	float: none !important;
	margin-top: 40px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
}
.login-container .login-box .login-body:before { display: none !important; }

/* "Seja Bem-Vindo, Entrar": mostra só o título e um subtítulo limpo (o texto original fica no HTML) */
.login-container .login-box .login-body .login-title { margin: 0 0 28px !important; text-align: left !important; font-size: 0 !important; color: var(--lg-ink-2) !important; }
.login-container .login-box .login-body .login-title strong { display: block; margin-bottom: 6px; font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--lg-ink) !important; }
.login-container .login-box .login-body .login-title:after { content: "Entre com seu usuário e senha para continuar."; display: block; font-size: 14px; font-weight: 400; color: var(--lg-ink-2); }

.login-container .login-box .login-body .form-group { margin: 0 0 14px !important; }
.login-container .login-box .login-body .form-group > [class*="col-md-"] { padding-left: 0; padding-right: 0; }

.login-container .login-box .login-body .form-control {
	height: 46px !important;
	padding: 0 14px 0 42px !important;
	border-radius: 10px !important;
	border: 1px solid var(--lg-line-2) !important;
	background-color: var(--lg-bg) !important;
	background-repeat: no-repeat !important;
	background-position: 14px center !important;
	background-size: 16px 16px !important;
	color: var(--lg-ink) !important;
	font-family: var(--lg-font) !important;
	font-size: 15px !important;
	box-shadow: none !important;
	transition: border-color .15s, box-shadow .15s;
}
.login-container .login-box .login-body .form-control::placeholder { color: #52525b !important; }
.login-container .login-box .login-body .form-control:hover { border-color: rgba(255, 255, 255, .22) !important; }
.login-container .login-box .login-body .form-control:focus { border-color: rgba(255, 255, 255, .45) !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, .08) !important; }

#usuario { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") !important; }
#senha { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") !important; }
#captcha { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z'/%3E%3C/svg%3E") !important; }

/* senha + botão de mostrar */
.login-container .login-box .login-body .input-group { display: flex !important; width: 100%; }
.login-container .login-box .login-body .input-group .form-control { flex: 1 1 auto; width: auto !important; min-width: 0; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: 0 !important; }
.login-container .login-box .login-body .input-group .viewPassword {
	display: flex !important; align-items: center; justify-content: center;
	flex: 0 0 46px; width: 46px; height: 46px;
	padding: 0 !important;
	border: 1px solid var(--lg-line-2) !important; border-left: 0 !important;
	border-radius: 0 10px 10px 0 !important;
	background: var(--lg-bg) !important;
	color: var(--lg-ink-3) !important;
	line-height: 1 !important;
	transition: color .15s;
}
.login-container .login-box .login-body .input-group .viewPassword:hover { color: var(--lg-ink) !important; }
.login-container .login-box .login-body .viewPassword .fa { font-size: 15px !important; vertical-align: middle; }

/* botão Entrar: claro e sólido */
.login-container .login-box .login-body .btn {
	height: 46px;
	margin-top: 6px;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--lg-ink) !important;
	background-image: none !important;
	color: var(--lg-bg) !important;
	font-family: var(--lg-font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: -.005em !important;
	text-transform: none !important;
	box-shadow: none !important;
	transition: background-color .15s !important;
}
.login-container .login-box .login-body .btn:after { display: none !important; }
.login-container .login-box .login-body .btn:hover { background: #e4e4e7 !important; transform: none !important; }
.login-container .login-box .login-body .btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 2px; }

#StatusCaptcha img { border-radius: 8px; border: 1px solid var(--lg-line); }
.login-container .login-box .login-body .form-group.pointer { color: var(--lg-ink-2) !important; font-size: 13px; }

/* atalhos (site, teste grátis, seja revendedor) */
.login-atalhos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--lg-line); }
.login-atalhos a { padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; text-decoration: none !important; color: var(--lg-ink-2) !important; border: 1px solid var(--lg-line-2); transition: color .15s, border-color .15s; }
.login-atalhos a:hover { color: var(--lg-ink) !important; border-color: rgba(255, 255, 255, .26); }

/* rodapé */
.login-container .login-box .login-footer {
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
	margin-top: 28px !important; padding: 0 !important;
	border: 0 !important; background: none !important;
	font-size: 12px; color: var(--lg-ink-3) !important;
}
.login-container .login-box .login-footer .pull-left { float: none !important; }
.login-seguro { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lg-ink-3); }
.login-seguro .fa { color: var(--lg-ink-3); }

/* mensagens do login (alerta do tema) */
#StatusGeral .alert, .noty_bar { border-radius: 10px !important; }

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
	.login-container { grid-template-columns: minmax(0, 1fr); }
	.login-showcase { display: none; }
	.login-container .login-box { padding: 56px 24px !important; max-width: 428px !important; }
}
@media (max-width: 480px) {
	.login-container .login-box { padding: 40px 20px !important; align-self: start; }
	.login-container .login-box .login-body { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
	.login-container .login-box { animation: none !important; }
}

/* mensagens (erro / sucesso) em faixa neutra, com a cor só no ícone */
.message-box .mb-container { background-image: none !important; background-color: #18181b !important; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8) !important; }
.message-box .mb-container .mb-middle .mb-title { font-family: var(--lg-font) !important; font-weight: 600 !important; letter-spacing: -.02em; }
.message-box.message-box-danger .mb-container .mb-title .fa { color: #f87171 !important; }
.message-box.message-box-success .mb-container .mb-title .fa { color: #4ade80 !important; }
.message-box.message-box-warning .mb-container .mb-title .fa { color: #fbbf24 !important; }
.message-box .mb-container .mb-content { color: #a1a1aa !important; }
.message-box .btn { background: #fafafa !important; color: #09090b !important; border: 0 !important; border-radius: 8px !important; font-weight: 600 !important; box-shadow: none !important; }
.message-box .btn:hover { background: #e4e4e7 !important; }
.message-box.message-box-danger .mb-container, .message-box.message-box-success .mb-container,
.message-box.message-box-info .mb-container, .message-box.message-box-warning .mb-container { background-image: none !important; background-color: #18181b !important; }

/* logos levam de volta ao site */
.login-emblema-link { display: inline-block; align-self: flex-start; }
.login-container .login-box a.login-logo { text-decoration: none !important; cursor: pointer; width: fit-content; }
.login-container .login-box a.login-logo:hover { opacity: .8; }