/*
 * Login "alegre" do ambiente de demonstração — mesmo formato do login do Coop na Mão
 * (painel de marca à esquerda, formulário à direita). Só carrega com ui.tema = demo
 * (ver view/usuario/login.php). Reaproveita a marcação e os IDs do login original, então
 * o fluxo de login/2FA em JavaScript não muda.
 */
body.login-alegre {
	--azul: #0b4a9c;
	--azul-esc: #083a7a;
	--sol: #fbbf24;
	--coral: #fb7185;
	--menta: #34d399;
	--ceu: #e8f4fd;
	--tinta: #1e293b;
	--suave: #64748b;
	--linha: #e2e8f0;
	margin: 0;
	background: #fff !important;
	font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	color: var(--tinta);
	-webkit-font-smoothing: antialiased;
}
.login-alegre * { box-sizing: border-box; }
.login-alegre .auth { display: flex; min-height: 100vh; }

/* ============ Painel de marca ============ */
.login-alegre .auth-brand {
	flex: 1 1 54%;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 60px 64px;
	background:
		radial-gradient(620px 460px at 10% 12%, rgba(251, 191, 36, .28), transparent 62%),
		radial-gradient(700px 520px at 95% 90%, rgba(52, 211, 153, .20), transparent 60%),
		radial-gradient(520px 420px at 85% 10%, rgba(251, 113, 133, .16), transparent 60%),
		linear-gradient(160deg, #eaf5ff 0%, #f4f9ff 45%, #fffaf0 100%);
}
/* caderno quadriculado */
.login-alegre .auth-brand .papel {
	position: absolute; inset: 0; pointer-events: none; opacity: .55;
	background-image:
		linear-gradient(to right, rgba(11, 74, 156, .06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(11, 74, 156, .06) 1px, transparent 1px);
	background-size: 34px 34px;
	-webkit-mask-image: radial-gradient(760px 640px at 30% 45%, #000 25%, transparent 80%);
	        mask-image: radial-gradient(760px 640px at 30% 45%, #000 25%, transparent 80%);
}
/* elementos flutuando */
.login-alegre .flutua {
	position: absolute; pointer-events: none; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	border-radius: 18px; color: #fff; font-size: 22px;
	box-shadow: 0 12px 26px rgba(15, 40, 80, .14);
	animation: flutua 7s ease-in-out infinite;
}
.login-alegre .flutua.f1 { width: 56px; height: 56px; background: var(--sol);   top: 9%;  left: 58%; transform: rotate(-10deg); animation-delay: 0s; }
.login-alegre .flutua.f2 { width: 48px; height: 48px; background: var(--coral); top: 72%; left: 8%;  border-radius: 50%; animation-delay: 1.2s; }
.login-alegre .flutua.f3 { width: 44px; height: 44px; background: var(--menta); top: 16%; left: 6%;  transform: rotate(12deg); animation-delay: 2.1s; }
.login-alegre .flutua.f4 { width: 40px; height: 40px; background: var(--azul);  top: 86%; left: 46%; border-radius: 50%; animation-delay: .6s; font-size: 18px; }
.login-alegre .bolha {
	position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
	animation: flutua 11s ease-in-out infinite;
}
.login-alegre .bolha.b1 { width: 14px; height: 14px; background: var(--sol);   top: 30%; left: 50%; }
.login-alegre .bolha.b2 { width: 10px; height: 10px; background: var(--coral); top: 60%; left: 36%; animation-delay: 2s; }
.login-alegre .bolha.b3 { width: 18px; height: 18px; background: var(--menta); top: 46%; left: 3%;  animation-delay: 4s; }
@keyframes flutua {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -14px; }
}

.login-alegre .brand-content { position: relative; z-index: 2; max-width: 440px; }
.login-alegre .brand-badge {
	display: inline-flex; align-items: center; gap: 9px;
	background: #fff; border: 1px solid #fde68a;
	box-shadow: 0 8px 22px rgba(251, 191, 36, .18);
	border-radius: 999px; padding: 8px 16px;
	font-weight: 800; letter-spacing: .04em; font-size: 12px; text-transform: uppercase;
	color: #92400e; margin-bottom: 24px;
}
.login-alegre .brand-badge .dot {
	width: 8px; height: 8px; border-radius: 50%; background: var(--sol);
	animation: pulso 2.2s ease-out infinite;
}
@keyframes pulso {
	0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, .6); }
	70%  { box-shadow: 0 0 0 10px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
.login-alegre .auth-brand h1 {
	font-size: 44px; font-weight: 900; line-height: 1.08; margin: 0 0 16px;
	letter-spacing: -.02em; color: var(--azul-esc);
}
.login-alegre .auth-brand h1 .destaque {
	background: linear-gradient(100deg, var(--azul) 0%, #2f7de1 45%, #f59e0b 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-alegre .auth-brand p.lead {
	font-size: 16.5px; line-height: 1.65; margin: 0 0 26px; color: #475569; max-width: 470px;
}
.login-alegre .brand-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.login-alegre .chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 700;
	background: #fff; border: 1px solid var(--linha); color: var(--tinta);
	box-shadow: 0 4px 12px rgba(15, 40, 80, .05);
	transition: transform .18s ease, box-shadow .18s ease;
}
.login-alegre .chip i { font-size: 15px; }
.login-alegre .chip:nth-child(1) i { color: var(--azul); }
.login-alegre .chip:nth-child(2) i { color: #f59e0b; }
.login-alegre .chip:nth-child(3) i { color: #10b981; }
.login-alegre .chip:nth-child(4) i { color: #f43f5e; }
.login-alegre .chip:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(15, 40, 80, .08); }
.login-alegre .brand-foot {
	position: absolute; z-index: 2; left: 64px; bottom: 28px;
	font-size: 12.5px; color: #64748b; font-weight: 600;
}
.login-alegre .brand-foot a { color: var(--azul); font-weight: 800; text-decoration: none; }

/* ---- Cartão "turma do dia" ---- */
.login-alegre .quadro {
	position: absolute; z-index: 1; right: 44px; top: 50%;
	width: 260px; margin-top: -150px;
	background: #fff; border-radius: 24px; padding: 18px 18px 16px;
	box-shadow: 0 30px 70px rgba(15, 40, 80, .16), 0 0 0 1px rgba(15, 40, 80, .04);
	transform: rotate(-5deg);
	animation: quadro 8s ease-in-out infinite;
}
@keyframes quadro { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-12px); } }
.login-alegre .q-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.login-alegre .q-ava {
	width: 38px; height: 38px; border-radius: 12px; flex: none;
	background: linear-gradient(140deg, var(--sol), #f59e0b);
	display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px;
}
.login-alegre .q-hi { font-size: 10.5px; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.login-alegre .q-nome { font-size: 14.5px; font-weight: 900; color: var(--tinta); }
.login-alegre .q-card { border-radius: 16px; padding: 12px 13px; margin-bottom: 10px; background: #f8fafc; }
.login-alegre .q-card.q-azul { background: linear-gradient(135deg, var(--azul), #2f7de1); color: #fff; box-shadow: 0 12px 22px rgba(11, 74, 156, .28); }
.login-alegre .q-rot { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; opacity: .8; }
.login-alegre .q-val { font-size: 19px; font-weight: 900; margin-top: 2px; }
.login-alegre .q-barra { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .3); margin-top: 9px; overflow: hidden; }
.login-alegre .q-barra i { display: block; height: 100%; width: 96%; border-radius: 99px; background: var(--sol); animation: enche 3.8s ease-in-out infinite; }
@keyframes enche { 0%, 100% { width: 88%; } 50% { width: 96%; } }
.login-alegre .q-lin { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; color: var(--tinta); }
.login-alegre .q-lin + .q-lin { margin-top: 8px; }
.login-alegre .q-ico { width: 26px; height: 26px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.login-alegre .q-ico.q-verde { background: #d1fae5; color: #059669; }
.login-alegre .q-ico.q-amarelo { background: #fef3c7; color: #b45309; }
.login-alegre .q-ico.q-rosa { background: #ffe4e6; color: #e11d48; }
.login-alegre .q-nota { margin-top: 4px; font-size: 11.5px; color: var(--suave); font-weight: 700; text-align: center; }

/* ============ Painel do formulário ============ */
.login-alegre .auth-form {
	flex: 1 1 46%;
	display: flex; align-items: center; justify-content: center;
	padding: 40px 24px; background: #fff; position: relative;
}
.login-alegre .auth-form::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(560px 360px at 80% -6%, rgba(251, 191, 36, .14), transparent 70%);
}
.login-alegre .auth-card { width: 100%; max-width: 390px; position: relative; z-index: 1; }

/* marcação original do login, reorganizada dentro do cartão */
.login-alegre .amarelo {
	background: none !important; box-shadow: none !important; border: 0 !important;
	height: auto !important; max-height: none !important; display: block; width: auto;
}
.login-alegre .amarelo p { margin: 0 0 14px; }
.login-alegre .amarelo img { position: static !important; max-width: 190px !important; width: 62%; height: auto; }
.login-alegre .container { width: auto !important; max-width: none; padding: 0 !important; margin: 0 !important; }
.login-alegre .full-content-center { max-width: none; margin: 0; padding: 0; text-align: left; }
.login-alegre .login-wrap {
	display: block; margin: 0; background: transparent !important; color: var(--tinta) !important;
	box-shadow: none !important; border: 0 !important; border-radius: 0; overflow: visible;
}
.login-alegre .auth-titulo { font-size: 26px; font-weight: 900; text-align: center; margin: 0 0 4px; color: var(--azul-esc); letter-spacing: -.01em; }
.login-alegre .auth-status {
	display: flex; align-items: center; justify-content: center; gap: 7px;
	font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
	color: #b45309; margin-bottom: 10px;
}
.login-alegre .login-block .auth-status .dot {
	display: inline-block; width: 8px; height: 8px; padding: 0 !important; margin: 0 !important;
	border-radius: 50%; background: var(--sol) !important; animation: pulso 2.2s ease-out infinite;
}
.login-alegre .login-block #msg-login {
	display: block; background: none !important; padding: 0 !important;
	margin: 0 0 24px; text-align: center; font-size: 14.5px; line-height: 1.45;
}
.login-alegre .login-block #msg-login:not(.text-success):not(.text-danger) { color: var(--suave) !important; }

.login-alegre .login-wrap .login-input { position: relative; margin: 0 0 16px; }
.login-alegre .login-wrap .login-input label {
	display: block; font-size: 13px; font-weight: 800; color: #334155; margin: 0 0 6px;
}
.login-alegre .login-wrap .login-input i.overlay {
	position: absolute; left: 15px; bottom: 18px; top: auto;
	background: none !important; border: 0; padding: 0; min-width: 0; margin: 0;
	color: #94a3b8; font-size: 16px; line-height: 1; display: block; height: auto;
	transition: color .15s ease;
}
.login-alegre .login-wrap .login-input:focus-within i.overlay { color: var(--azul); }
.login-alegre .login-wrap .login-input .text-input {
	width: 100%; height: 54px !important;
	border: 1px solid var(--linha) !important; border-radius: 14px !important;
	background: #f7fafc !important; padding: 0 46px 0 42px !important;
	font-size: 15.5px; color: var(--tinta) !important; box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.login-alegre .login-wrap .login-input .text-input:focus {
	outline: none; background: #fff !important; border-color: var(--azul) !important;
	box-shadow: 0 0 0 4px rgba(11, 74, 156, .14) !important;
}
.login-alegre .login-wrap .login-input .text-input:-webkit-autofill,
.login-alegre .login-wrap .login-input .text-input:-webkit-autofill:hover,
.login-alegre .login-wrap .login-input .text-input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #f7fafc inset !important;
	-webkit-text-fill-color: var(--tinta) !important;
	transition: background-color 9999s ease-out 0s;
}
.login-alegre .ver-senha {
	position: absolute; right: 8px; bottom: 9px;
	border: 0; background: transparent; color: #94a3b8; cursor: pointer;
	width: 36px; height: 36px; border-radius: 10px; font-size: 16px;
	display: flex; align-items: center; justify-content: center;
}
.login-alegre .ver-senha:hover { color: var(--azul); background: #eef2f7; }

.login-alegre #btn-entrar.botao_login {
	position: relative; overflow: hidden;
	width: 100%; height: 54px; margin-top: 8px;
	border: 0 !important; border-radius: 14px;
	background: linear-gradient(100deg, var(--azul-esc) 0%, var(--azul) 50%, #2f7de1 100%) !important;
	color: #fff !important; font-size: 16px; font-weight: 800; letter-spacing: .01em;
	box-shadow: 0 10px 24px rgba(11, 74, 156, .32);
	transition: filter .15s ease, transform .05s ease;
}
.login-alegre #btn-entrar.botao_login::after {
	content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
	transform: skewX(-18deg); animation: brilho 4.5s ease-in-out infinite;
}
@keyframes brilho { 0%, 62% { left: -120%; } 88%, 100% { left: 140%; } }
.login-alegre #btn-entrar.botao_login:hover { filter: brightness(1.06); }
.login-alegre #btn-entrar.botao_login:active { transform: translateY(1px); }
.login-alegre .login-wrap .row { margin: 0; }
.login-alegre .login-wrap .col-sm-12 { padding: 0; }
.login-alegre #etapa-2fa h4 { font-weight: 900; color: var(--azul-esc); }

.login-alegre footer {
	background: none !important; border: 0 !important; color: #94a3b8 !important;
	text-align: center; font-size: 12px; margin-top: 26px; position: static !important;
}
.login-alegre footer a { color: var(--azul) !important; }

/* ============ Responsivo ============ */
@media (max-width: 1500px) {
	.login-alegre .auth-brand { padding: 56px 46px; }
	.login-alegre .brand-content { max-width: 420px; }
	.login-alegre .auth-brand h1 { font-size: 34px; }
	.login-alegre .quadro { right: 30px; width: 240px; }
}
@media (max-width: 1300px) { .login-alegre .quadro { display: none; } .login-alegre .brand-content { max-width: 520px; } }
@media (max-width: 860px) {
	.login-alegre .auth { flex-direction: column-reverse; }
	.login-alegre .auth-form { flex: none; padding: 30px 16px 24px; background: #f4f8fd; }
	.login-alegre .auth-card {
		max-width: 460px; margin: 0 auto; background: #fff; border-radius: 22px;
		padding: 28px 22px 22px; box-shadow: 0 14px 34px rgba(15, 40, 80, .10);
	}
	.login-alegre .auth-brand { flex: none; padding: 40px 22px 34px; text-align: center; align-items: center; }
	.login-alegre .brand-content { margin: 0 auto; }
	.login-alegre .auth-brand h1 { font-size: 29px; }
	.login-alegre .auth-brand p.lead { font-size: 15px; margin: 0 auto 20px; }
	.login-alegre .brand-chips { justify-content: center; }
	.login-alegre .brand-foot { position: static; margin-top: 22px; }
	.login-alegre .flutua.f1, .login-alegre .flutua.f4 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.login-alegre .flutua, .login-alegre .bolha, .login-alegre .quadro, .login-alegre .q-barra i,
	.login-alegre #btn-entrar.botao_login::after, .login-alegre .dot { animation: none !important; }
}