/* Login — split-screen no padrão do CRM (crm-ui.css/.ui2): painel de marca
   em vinho + painel branco com o formulário. Usa os tokens (--ui-*) já
   carregados globalmente. */

html, body.login-page { height: 100%; margin: 0; }
body.login-page { overflow-x: hidden; }

.login-split {
	position: relative;
	display: flex;
	min-height: 100vh;
}

/* ---------- Painel de marca (esquerda) ---------- */
.login-brand {
	flex: 0 0 42%;
	max-width: 560px;
	position: relative;
	background: var(--ui-accent-2); /* #6f1a22 -- mesmo vinho escuro de fundo do ícone da marca */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.login-brand-shape {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.07);
	pointer-events: none;
}
.login-brand-shape-1 { width: 440px; height: 440px; top: -140px; right: -160px; }
.login-brand-shape-2 { width: 300px; height: 300px; bottom: -110px; left: -90px; background: rgba(255,255,255,.05); }

.login-brand-inner { position: relative; z-index: 1; text-align: center; padding: 40px; }
.login-brand-logo {
	display: block;
	max-width: 178px;
	width: 100%;
	height: auto;
	filter: brightness(0) invert(1);
	margin: 0 auto 14px;
}
/* Linha separada do texto de propósito -- fica sempre estática, não entra
   na animação (achado do Renato: antes a linha piscava junto do slogan
   porque era border-top do mesmo elemento animado). Mesma largura da logo. */
.login-brand-divider {
	width: 178px;
	height: 1px;
	margin: 0 auto 10px;
	background: rgba(255,255,255,.22);
}
.login-brand-tag {
	display: inline-block;
	margin: 0 auto;
	color: rgba(255,255,255,.8);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.6;
	white-space: nowrap;
	/* Entra deslizando de fora da tela; depois disso pulsa igual batimento
	   cardíaco (dois toques rápidos, "tum-tum", seguidos de uma pausa) em
	   vez de um pisca-pisca liso -- pedido do Renato. Só o texto pulsa,
	   a linha acima fica parada.*/
	opacity: 0;
	text-shadow: 0 0 0 rgba(255,255,255,0);
	animation:
		login-tag-in .9s cubic-bezier(.2,.7,.2,1) forwards,
		login-tag-heartbeat 2.6s ease-in-out 1s infinite;
}
@keyframes login-tag-heartbeat {
	0%, 20%, 40%, 100% {
		opacity: .55; transform: scale(1);
		text-shadow: 0 0 0 rgba(255,255,255,0);
	}
	10%, 30% {
		opacity: 1; transform: scale(1.07);
		text-shadow: 0 0 16px rgba(255,255,255,.65);
	}
}
@keyframes login-tag-in {
	0%   { opacity: 0; transform: translateX(-60px); }
	100% { opacity: 1; transform: translateX(0); }
}

/* ---------- Painel de login (direita) ---------- */
.login-panel {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--ui-card);
	padding: 40px 24px;
	overflow: hidden;
}
.login-panel-inner { width: 100%; max-width: 360px; }

.login-top { display: flex; align-items: center; margin-bottom: 30px; }
.login-panel-logo { display: none; height: 28px; width: auto; }
.login-lang { font-size: .78rem; margin-left: auto; }
.login-lang a { color: var(--ui-ink-3); text-decoration: none; font-weight: 600; }
.login-lang a.is-active { color: var(--ui-accent); }
.login-lang span { color: var(--ui-ink-3); margin: 0 4px; }

.login-title {
	font-size: 1.55rem;
	font-weight: 700;
	color: var(--ui-ink);
	letter-spacing: -.01em;
	margin: 0 0 6px;
}
.login-subtitle { font-size: .88rem; color: var(--ui-ink-3); margin: 0 0 26px; }

.login-banner { text-align: left; margin-bottom: 18px; }

/* Discreto de propósito -- linha simples, sem fundo/pílula chamando atenção,
   com respiro suficiente pra não brigar com o título nem com o formulário.
   É um <a>, não <button>, de propósito -- botão nativo tem estilo próprio
   do navegador (cantos, "moldura" de foco dupla) que nem appearance:none
   tirava por completo (achado do Renato: "dois fundos"/pílula). */
.login-autologin { margin: 4px 0 38px; }
.login-autologin-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid var(--ui-line);
	border-radius: 8px;
	background: transparent;
	font-size: .78rem;
	color: var(--ui-ink-3);
	text-align: left;
	text-decoration: none;
	transition: color .12s, border-color .12s, background .12s;
}
.login-autologin-btn:hover {
	color: var(--ui-accent);
	border-color: rgba(134,32,41,.3);
	background: var(--ui-tint); /* vinho bem clarinho -- mesmo hover do resto do CRM */
}
.login-autologin-btn b { color: var(--ui-ink); font-weight: 600; }
.login-autologin-btn i {
	font-size: .68rem;
	color: var(--ui-ink-3);
	transition: transform .15s, color .12s;
}
.login-autologin-btn:hover i { color: var(--ui-accent); transform: translateX(2px); }

.login-form .ui-field { margin-bottom: 14px; }
.login-form .ui-field label { text-align: left; }
.login-form-lead { font-size: .86rem; color: var(--ui-ink-2); margin: 0 0 16px; }

.login-submit {
	width: 100%;
	height: 44px;
	font-size: .9rem;
	margin-top: 6px;
}

.login-forgot {
	display: block;
	text-align: center;
	margin-top: 16px;
	font-size: .82rem;
	color: var(--ui-ink-3);
	text-decoration: none;
}
.login-forgot:hover { color: var(--ui-accent); }

.login-footer {
	text-align: center;
	font-size: .76rem;
	color: var(--ui-ink-3);
	margin: 28px 0 0;
}

/* ---------- Responsivo: esconde o painel de marca, mostra a logo colorida
   pequena no topo do formulário ---------- */
@media (max-width: 880px) {
	.login-brand { display: none; }
	.login-panel { flex: 1 1 100%; }
	.login-panel-logo { display: block; }
}
@media (max-width: 420px) {
	.login-panel { padding: 32px 18px; }
}

/* ---------- Brincadeira: escurece o painel de login inteiro quando a
   lâmpada queima (difícil de enxergar), volta sozinho em 30s (ver JS).
   O brilho "ligado" que ilumina o formulário NÃO é mais este elemento --
   achado do Renato: ficava num canto sem lâmpada nenhuma perto. Agora é
   só o .login-lamp-glow mesmo, que já nasce centrado embaixo da luminária
   de verdade (mais abaixo neste arquivo). ---------- */
.login-glare {
	position: absolute;
	pointer-events: none;
	z-index: 5;
	opacity: 0;
	transition: opacity .4s ease-out, background .4s ease-out;
}
.login-glare.is-dark {
	inset: 0;
	border-radius: 0;
	background: rgba(8,6,6,.93);
	opacity: 1;
}

/* ---------- Brincadeira: lâmpada + interruptor no canto do painel vinho.
   Mexeu demais (BURN_AT no JS), queima -- volta ao normal sozinha em 30s. ---------- */
/* Centro do painel BRANCO (não a costura) -- é onde a luz realmente precisa
   ficar, já que ela só serve pra iluminar o lado do login. A fórmula é
   "boundary + metade do que sobra": min(42%,560px) reproduz o mesmo cálculo
   de flex-basis/max-width do .login-brand pra achar a boundary certa em
   qualquer largura de tela, e daí soma metade da largura restante. */
.login-lamp {
	position: absolute;
	z-index: 20;
	top: 0;
	left: calc(50% + min(42%, 560px) / 2);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Clarão ambiente ao redor da luminária -- separado do clarão que bate no
   formulário do outro lado (.login-glare, em custom_styles_login.css mais
   acima). Começa ligada de propósito -- a graça é a pessoa querer apagar. */
/* Reforçado de propósito -- é o ÚNICO brilho "ligado" que ilumina o painel
   de login agora (achado do Renato), então precisa ser forte de verdade,
   não só um halo discreto perto do bulbo. */
.login-lamp-glow {
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	width: 343px;
	height: 343px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,214,110,.46) 0%, rgba(255,214,110,.18) 45%, transparent 72%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s ease-out;
}
.login-lamp.is-on .login-lamp-glow { opacity: 1; }

/* Luminária de pendente feita só de CSS (fio + calota + cúpula + lâmpada) --
   "3D tipo em casa mesmo", pedido do Renato, em vez do ícone chapado. */
.login-lamp-fixture {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.login-lamp-cord {
	width: 3px;
	height: 42px;
	background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.3));
}
.login-lamp-cap {
	width: 16px;
	height: 8px;
	border-radius: 3px 3px 0 0;
	background: linear-gradient(180deg, #4a4038, #211c18);
}
.login-lamp-shade {
	position: relative;
	width: 76px;
	height: 42px;
	background: linear-gradient(180deg, #4a4038 0%, #211c18 100%);
	clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
	filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
	transition: background .3s;
}
.login-lamp.is-on .login-lamp-shade {
	background: linear-gradient(180deg, #6b5847 0%, #3a2f24 55%, #a97a35 100%);
}
.login-lamp-shade-rim {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 6px;
	border-radius: 50%;
	background: linear-gradient(180deg, #5c4d3d, #1c1712);
}
.login-lamp-bulb {
	width: 22px;
	height: 26px;
	margin-top: -2px;
	border-radius: 50% 50% 46% 46%;
	background: radial-gradient(circle at 35% 30%, #756455, #3a3129 70%, #211c18 100%);
	opacity: .55;
	transition: opacity .25s, box-shadow .25s, background .25s;
}
.login-lamp.is-on .login-lamp-bulb {
	opacity: 1;
	background: radial-gradient(circle at 35% 30%, #fffdf3, #ffe9ac 55%, #ffca62 100%);
	box-shadow: 0 0 16px 6px rgba(255,214,110,.85), 0 0 40px 16px rgba(255,214,110,.45);
}
.login-lamp.is-burnt .login-lamp-bulb {
	opacity: .55;
	background: radial-gradient(circle at 35% 30%, #4a3f38, #2a231f 70%, #171310 100%);
	box-shadow: none;
}
.login-lamp.is-popping .login-lamp-bulb { animation: login-lamp-pop .5s ease-out; }
@keyframes login-lamp-pop {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.4); }
	55%  { transform: scale(.8); }
	100% { transform: scale(1); }
}

/* Interruptor de parede estilo canadense/americano -- plaquinha branca com
   parafuso em cima/embaixo e a alavanca dentro de um vão, igual o de casa
   (pedido do Renato, "pra simular que estamos no Canadá"). Fica do LADO da
   luminária, não embaixo -- "como se tivesse colado na parede", não pendurado
   junto com a lâmpada -- e bem menor. Alavanca sobe (ligado) ou desce
   (desligado), com uma pequena "molinha" no final. */
.login-lamp-switch {
	position: absolute;
	z-index: 1;
	right: -46px;
	top: 20px;
	width: 26px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(0,0,0,.14);
	border-radius: 3px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background: linear-gradient(155deg, #fdfdfd, #dcdcdc);
	box-shadow: 0 3px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.85);
}
.login-lamp-switch-screw {
	position: absolute;
	left: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	transform: translateX(-50%) rotate(28deg);
	background: radial-gradient(circle at 35% 35%, #f4f4f4, #9a9a9a 70%, #6c6c6c 100%);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.login-lamp-switch-screw::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px;
	height: .75px;
	background: rgba(0,0,0,.45);
	transform: translate(-50%, -50%);
}
.login-lamp-switch-screw-top { top: 3px; }
.login-lamp-switch-screw-bottom { bottom: 3px; }

.login-lamp-switch-slot {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 10px;
	height: 24px;
	border-radius: 2px;
	background: linear-gradient(180deg, #c8c8c8, #ececec);
	box-shadow: inset 0 1px 2px rgba(0,0,0,.35), inset 0 -1px 1px rgba(255,255,255,.6);
	overflow: hidden;
}
.login-lamp-switch-toggle {
	position: absolute;
	left: 1px;
	right: 1px;
	top: 12px; /* desligado = alavanca embaixo */
	height: 10px;
	border-radius: 1px;
	background: linear-gradient(180deg, #fdfdfd, #cfcfcf);
	box-shadow: 0 1px 1px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.95);
	transition: top .2s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.login-lamp.is-on .login-lamp-switch-toggle {
	top: 2px; /* ligado = alavanca em cima */
	background: linear-gradient(180deg, #fff3d6, #ffcf72);
}
.login-lamp-switch:active .login-lamp-switch-toggle { transform: scaleY(.94); }
.login-lamp.is-burnt .login-lamp-switch { cursor: not-allowed; filter: grayscale(.6); opacity: .7; }

/* Também ao lado, embaixo do interruptor -- não mais empilhado com a
   luminária, já que o interruptor saiu do fluxo normal (é absolute agora). */
.login-lamp-msg {
	/* "right:-98px" com width:130 fazia a borda ESQUERDA da caixa começar 32px
	   pra DENTRO da luminária (right negativo empurra pra fora, mas não o
	   suficiente pra cobrir a largura toda) -- "Oops!"/"Putz!" ficava atrás
	   da cúpula. -140 garante que a caixa inteira fique à direita da cúpula. */
	position: absolute;
	top: 68px;
	right: -140px;
	width: 130px;
	font-size: .66rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .01em;
	text-align: center;
	color: rgba(255,255,255,.7);
}

@media (max-width: 880px) {
	.login-lamp { display: none; } /* painel some no mobile, a lâmpada some junto */
}