:root {
	--bg-1: #eef3f9;
	--bg-2: #e6eef7;
	--card: #ffffff;
	--card-border: rgba(15, 23, 42, 0.10);
	--text: #0f172a;
	--muted: #475569;
	--focus: rgba(15, 23, 42, 0.13);
	--field-bg: #f8fafc;
	--field-border: rgba(15, 23, 42, 0.16);
	--shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
	font-family: var(--font);
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
	color: var(--text);
	background: linear-gradient(145deg, var(--bg-1) 0%, var(--bg-2) 100%);
	overflow: hidden;
}

body::before, body::after {
	content: ""; position: fixed; inset: -30%;
	z-index: 0; pointer-events: none;
	will-change: transform;
}
body::before {
	background:
		radial-gradient(46% 50% at 30% 34%, var(--mancha-1), transparent 64%),
		radial-gradient(42% 46% at 72% 40%, var(--mancha-2), transparent 62%);
	animation: deriva-a 26s ease-in-out infinite alternate;
}
body::after {
	background:
		radial-gradient(48% 52% at 62% 70%, var(--mancha-3), transparent 64%),
		radial-gradient(38% 42% at 34% 74%, var(--mancha-4), transparent 62%);
	animation: deriva-b 34s ease-in-out infinite alternate;
}

@keyframes deriva-a {
	from { transform: translate3d(-9%, -7%, 0) scale(1.05); }
	to   { transform: translate3d(10%,  8%, 0) scale(1.20); }
}
@keyframes deriva-b {
	from { transform: translate3d( 9%,  7%, 0) scale(1.18); }
	to   { transform: translate3d(-10%, -8%, 0) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
	body::before, body::after { animation: none; }
}

.cena { display: none; }
[data-cena] .cena {
	display: block;
	position: fixed; inset: 0; width: 100%; height: 100%;
	z-index: 0; pointer-events: none;
}
.cena g, .cena polyline, .cena path, .cena rect, .cena circle { vector-effect: non-scaling-stroke; }
.cena rect, .cena circle { fill: var(--traco-cheio); }

:root {
	--mancha-1:    rgba(37, 99, 235, 0.20);
	--mancha-2:    rgba(14, 165, 233, 0.20);
	--mancha-3:    rgba(45, 212, 191, 0.16);
	--mancha-4:    rgba(129, 140, 248, 0.16);
	--vidro-a:     rgba(255, 255, 255, 0.90);
	--vidro-b:     rgba(255, 255, 255, 0.78);
	--vidro-borda: rgba(255, 255, 255, 0.70);
}
[data-periodo="noite"] {
	--bg-1: #121a2e;
	--bg-2: #0c1322;
	--mancha-1:    rgba(56, 189, 248, 0.16);
	--mancha-2:    rgba(59, 130, 246, 0.18);
	--mancha-3:    rgba(45, 212, 191, 0.12);
	--mancha-4:    rgba(139, 92, 246, 0.16);

	--vidro-a:     rgba(255, 255, 255, 0.97);
	--vidro-b:     rgba(241, 245, 252, 0.95);
	--vidro-borda: rgba(255, 255, 255, 0.55);
}

.login-shell { width: 100%; max-width: 460px; position: relative; z-index: 1; }
.login-container {
	position: relative; z-index: 1;
	background: linear-gradient(180deg, var(--vidro-a), var(--vidro-b));
	border: 1px solid var(--vidro-borda);
	border-radius: 22px;
	box-shadow:
		0 24px 60px rgba(15, 23, 42, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.85);
	overflow: hidden;
	-webkit-backdrop-filter: blur(22px) saturate(125%);
	backdrop-filter: blur(22px) saturate(125%);
}

@supports not (backdrop-filter: blur(1px)) {
	.login-container { background: rgba(255, 255, 255, 0.96); }
}
.login-container::before {
	content: ""; display: block; height: 4px;
	background: linear-gradient(90deg, #ef3b53 0%, #fa6b2f 48%, #f6b83d 100%);
}
.login-inner { padding: 30px; }

.logo { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px;
        --tinta-topo: 4.7px; --tinta-altura: 60.2px;
        --marca-tinta: 1; --marca-topo: 0; --marca-lado: 0; }
.logo-texto { flex: 1; min-width: 0; }

.logo img {
	width: auto;
	height: calc(var(--tinta-altura) / var(--marca-tinta));
	margin-top: calc(var(--tinta-topo) - var(--tinta-altura) / var(--marca-tinta) * var(--marca-topo));
	margin-right: calc(var(--tinta-altura) / var(--marca-tinta) * var(--marca-lado) * -1);
}
.logo h1 { font-size: 40px; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 6px; }
.logo p { color: var(--muted); font-size: 14px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 7px; }
.form-group input {

	width: 100%; padding: 12px 42px 12px 13px; border: 1px solid var(--field-border); border-radius: 10px;
	font-size: 15px; color: var(--text); background: var(--field-bg);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-group input::placeholder { color: #94a3b8; }
.dica { margin-top: 6px; font-size: 12px; color: #b45309; line-height: 1.35; }
.form-group input:focus {
	outline: none; border-color: #64748b; box-shadow: 0 0 0 4px var(--focus); background: #ffffff;
}

.btn-login {
	width: 100%; margin-top: 8px; padding: 11px 14px; border: none; border-radius: 10px;
	font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: #fff;
	background: linear-gradient(135deg, #334155 0%, #0f172a 100%);
	cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-login:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.30); }
.btn-login:disabled { opacity: 0.75; cursor: wait; }
.btn-secondary {
	width: 100%; margin-top: 8px; padding: 10px 14px; border: 1px solid var(--field-border);
	border-radius: 10px; font-size: 13px; font-weight: 600; color: #334155; background: #fff;
	cursor: pointer; transition: background 0.2s ease;
}
.btn-secondary:hover:not(:disabled) { background: #f8fafc; }
.btn-secondary:disabled { opacity: 0.6; cursor: default; }
.btn-terciario {
	display: block; width: 100%; margin-top: 12px; padding: 4px; border: none; background: none;
	font-size: 13px; color: var(--muted); cursor: pointer;
	text-decoration: underline; text-underline-offset: 2px;
}
.btn-terciario:hover { color: var(--text); }
.btn-terciario[hidden] { display: none; }
.status { margin-top: 14px; padding: 11px 13px; border-radius: 10px; font-size: 13px; display: none; line-height: 1.4; }
.status.visible { display: block; }
.status.info    { background: rgba(15, 23, 42, 0.07); color: #334155; }
.status.success { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.status.error   { background: rgba(239, 68, 68, 0.12); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.4); }
.footer { margin-top: 18px; text-align: center; font-size: 12px; color: var(--muted); line-height: 1.45; }
.footer a { color: #334155; text-decoration: underline; text-underline-offset: 2px; }
.footer a:hover { text-decoration: underline; }
.version { font-size: 12px; color: #334155; margin-top: 8px; }
.version-meta { font-size: 11px; color: #64748b; margin-top: 2px; }
.copyright { margin-top: 8px; }
@media (max-width: 560px) {
	body { padding: 14px; }
	.login-inner { padding: 24px 18px 20px; }
	.logo h1 { font-size: 30px; }
	.logo { gap: 12px; --tinta-topo: 3.5px; --tinta-altura: 50.9px; }
}