/*
 * Tema Reage 2026 — página de início de sessão
 * Versão do ficheiro: 2026-10-20 15:49
 */

:root { --blue: #2F7BE0; --grn: #6FB33F; --dark: #0F1217; --dark-rgb: 15, 18, 23; --light: #F6F5F0; --f-display: 'Bricolage Grotesque', 'Instrument Sans', sans-serif; --f-text: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif; }

body.login {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-height: 100vh;
	margin: 0;
	padding: 32px 0 32px 56%;
	background: var(--light);
	color: #15171C;
	font-family: var(--f-text);
}

/* Painel de identidade */
.reage-login-brand {
	position: fixed;
	inset: 0 44% 0 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 22px;
	box-sizing: border-box;
	padding: clamp(28px, 5vw, 72px);
	background: var(--dark);
	color: #F6F5F0;
	overflow: hidden;
	isolation: isolate;
}
.reage-login-brand::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--img, none) center / cover no-repeat; }
.reage-login-brand::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(var(--dark-rgb), 0.97) 0%, rgba(var(--dark-rgb), 0.7) 48%, rgba(var(--dark-rgb), 0.6) 100%); }
.reage-login-brand__grid { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px); background-size: 26px 26px; opacity: 0.6; mask: linear-gradient(to bottom, transparent, #000 40%, transparent); -webkit-mask: linear-gradient(to bottom, transparent, #000 40%, transparent); }
.reage-login-brand__logo { display: flex; align-items: center; gap: 18px; color: #fff; text-decoration: none; }
.reage-login-brand__mark { width: 84px; height: 84px; animation: reage-mark-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.reage-login-brand__wm { width: min(60%, 300px); height: auto; animation: reage-wm-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both; }
@keyframes reage-mark-in { from { opacity: 0; transform: rotate(-180deg) scale(0.3); } }
@keyframes reage-wm-in { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-10px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
.reage-login-brand__txt { display: grid; gap: 2px; padding-top: 20px; border-top: 1px solid rgba(246, 245, 240, 0.2); }
.reage-login-brand__txt span { font-family: 'JetBrains Mono', Menlo, monospace; font-size: 0.8rem; letter-spacing: 0.04em; color: rgba(246, 245, 240, 0.65); }
.reage-login-brand__txt strong { font-family: var(--f-display); font-weight: 700; font-size: 1.7rem; line-height: 1.15; letter-spacing: -0.03em; }
.reage-login-brand__txt em { font-style: normal; font-size: 1rem; color: rgba(246, 245, 240, 0.75); }

/* Formulário */
#login { width: min(360px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0 0; }
.login h1.wp-login-logo, .login #login > h1:first-child { margin: 0 0 18px; }
.login h1 a, .login .wp-login-logo a { width: auto; height: auto; margin: 0; padding: 0; background: none; text-indent: 0; overflow: visible; font-family: var(--f-display); font-weight: 700; font-size: 1.9rem; line-height: 1.1; letter-spacing: -0.03em; color: #15171C; text-align: left; }
.login h1 a:focus { box-shadow: none; text-decoration: underline; }
.login form { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.login label { font-size: 0.85rem; font-weight: 600; color: #5C616B; }
.login form .input, .login input[type='text'], .login input[type='password'], .login input[type='email'] { margin: 6px 0 18px; padding: 10px 14px; min-height: 46px; border: 1px solid #DCDBD4; border-radius: 12px; background: #fff; font-size: 1rem; box-shadow: none; }
.login form .input:focus, .login input[type='text']:focus, .login input[type='password']:focus, .login input[type='email']:focus { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); outline: none; }
.login .button.wp-hide-pw { min-height: 46px; margin-top: 0; color: #5C616B; }
.login .button.wp-hide-pw:focus { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.login .forgetmenot { float: none; margin: 0 0 18px; }
.login .forgetmenot label { font-weight: 400; color: #15171C; }
.login input[type='checkbox'] { border-color: #9aa5a1; border-radius: 4px; }
.login input[type='checkbox']:focus { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.login p.submit { float: none; }
.login .button-primary, .wp-core-ui.login .button-primary { float: none; width: 100%; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--dark); color: #fff; font-weight: 600; font-size: 0.98rem; transition: background 0.25s, color 0.25s; }
.login .button-primary:hover, .login .button-primary:focus, .wp-core-ui.login .button-primary:hover, .wp-core-ui.login .button-primary:focus { background: var(--blue); color: #fff; box-shadow: none; }
.login #nav, .login #backtoblog { margin: 14px 0 0; padding: 0; font-size: 0.875rem; }
.login #nav a, .login #backtoblog a, .login .privacy-policy-link { color: #5C616B; }
.login #nav a:hover, .login #backtoblog a:hover, .login .privacy-policy-link:hover { color: #15171C; }
.login .privacy-policy-page-link { width: min(360px, calc(100% - 48px)); margin: 18px auto 0; text-align: left; }
.login .message, .login .notice, .login #login_error, .login .success { margin: 0 0 18px; padding: 12px 14px; border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; background: #fff; box-shadow: none; }
.login #login_error { border-left-color: #b3261e; }
.login .language-switcher { display: none; }
.login #login form p { margin-bottom: 0; }
.login .wp-pwd { margin-bottom: 0; }

/* Crédito */
.reage-login-credit { display: flex; align-items: center; gap: 8px; width: min(360px, calc(100% - 48px)); margin: 28px auto 24px; padding-top: 16px; border-top: 1px solid rgba(21, 23, 28, 0.14); font-size: 0.8rem; color: #5C616B; }
.reage-login-credit a { display: inline-flex; }
.reage-logo { height: 18px; width: auto; }

@media (max-width: 860px) {
	body.login { justify-content: flex-start; padding: 0 0 24px; }
	.reage-login-brand { position: relative; inset: auto; padding: 28px 24px 24px; gap: 14px; }
	.reage-login-brand__mark { width: 56px; height: 56px; }
	.reage-login-brand__wm { width: min(50%, 220px); }
	#login { padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { .reage-login-brand__mark, .reage-login-brand__wm { animation: none; } }