/* login2.css — tela de entrada do player v2 (radio2/login.php).
   Arquivo próprio: é uma página inteira, não um painel, e o player nunca carrega isto. */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 18px;
	background: #0b0b0f;
	color: #fff;
	font-family: 'Ubuntu', -apple-system, 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}

/* ---- fundo ---------------------------------------------------------------------------------------
   Duas manchas de cor que respiram devagar. É desenhado, não é imagem: funciona para qualquer
   servidor, inclusive os que não têm logomarca cadastrada. */

/* As duas cores saem da logomarca, extraídas no navegador (ver o script em login.php). Enquanto não
   ficam prontas valem estes valores neutros — e a aurora só aparece DEPOIS, com fade, para não haver
   piscada de cor errada no primeiro quadro. */
:root {
	--lg-a: hsla(226, 72%, 62%, 1);
	--lg-b: hsla(342, 78%, 62%, 1);
	--lg-a-suave: hsla(226, 72%, 62%, .34);
	--lg-b-suave: hsla(342, 78%, 62%, .26);
	--lg-aro: rgba(255, 255, 255, .14);
}

.lg-aurora {
	position: fixed;
	inset: -25%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(38% 42% at 22% 28%, var(--lg-a-suave), transparent 70%),
		radial-gradient(34% 38% at 78% 72%, var(--lg-b-suave), transparent 70%);
	filter: blur(48px);
	opacity: 0;
	transition: opacity .7s ease;
	animation: lg-respirar 18s ease-in-out infinite alternate;
}

/* a classe entra quando a paleta foi extraída */
.lg-colorido .lg-aurora { opacity: 1; }

@keyframes lg-respirar {
	from { transform: translate3d(-2%, -1%, 0) scale(1); }
	to   { transform: translate3d(3%, 2%, 0) scale(1.12); }
}

/* granulado sutil por cima: tira o aspecto "degradê de banco de imagem" */
.lg-grao {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- cartão ------------------------------------------------------------------------------------- */

.lg-caixa {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 400px;
	padding: 38px 30px 30px;
	border-radius: 26px;
	background: rgba(19, 19, 24, .78);
	backdrop-filter: blur(30px) saturate(150%);
	-webkit-backdrop-filter: blur(30px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, .09);
	box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .95),
	            0 0 70px -40px var(--lg-a),
	            inset 0 1px 0 rgba(255, 255, 255, .07);
	animation: lg-entrar .5s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes lg-entrar {
	from { opacity: 0; transform: translateY(16px) scale(.985); }
	to   { opacity: 1; transform: none; }
}

/* ---- marca -------------------------------------------------------------------------------------- */

.lg-marca {
	position: relative;
	width: 84px;
	height: 84px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ondas que pulsam para fora, uma atrás da outra: a rádio "no ar" */
.lg-marca::before,
.lg-marca::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 26px;
	border: 1px solid var(--lg-aro);
	animation: lg-onda 2.8s ease-out infinite;
}
.lg-marca::after { animation-delay: 1.4s; }

@keyframes lg-onda {
	0%   { opacity: .5; transform: scale(1); }
	100% { opacity: 0;  transform: scale(1.45); }
}

.lg-logo {
	width: 100%;
	height: 100%;
	border-radius: 24px;
	background-size: cover;
	background-position: center;
	background-color: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
}

/* sem logomarca cadastrada entra o símbolo desenhado, não um avatar genérico de pessoa */
.lg-logo.sem-imagem {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
}
.lg-logo.sem-imagem svg { width: 42px; height: 42px; }

/* .lg-titulo saiu: a tela é neutra, sem nome de marca. A identidade vem só da logomarca do servidor. */
.lg-sub {
	/* sem título acima, a margem de topo compensa o espaço que ele ocupava */
	margin: 14px 0 26px;
	text-align: center;
	font-size: 13px;
	color: rgba(255, 255, 255, .42);
}

/* ---- erro ---------------------------------------------------------------------------------------- */

.lg-erro {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 18px;
	padding: 12px 14px;
	border-radius: 13px;
	background: rgba(72, 26, 32, .8);
	border: 1px solid rgba(255, 120, 140, .4);
	color: #ffa3ae;
	font-size: 12.5px;
	font-weight: 600;
	animation: lg-tremer .4s ease both;
}

@keyframes lg-tremer {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-6px); }
	75%      { transform: translateX(6px); }
}

/* ---- campos --------------------------------------------------------------------------------------
   O input ocupa 100% do bloco e o ícone é posicionado por cima. Em flex, a largura intrínseca do
   input escapava do container e o preenchimento automático do navegador vazava para fora da borda. */

.lg-campo {
	position: relative;
	margin-bottom: 12px;
}

.lg-campo input {
	display: block;
	width: 100%;
	height: 58px;
	padding: 22px 16px 8px 46px;
	border-radius: 15px;
	background: rgba(0, 0, 0, .34);
	border: 1px solid rgba(255, 255, 255, .11);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	outline: none;
	transition: border-color .18s ease, background .18s ease;
}
.lg-campo input:focus {
	border-color: var(--lg-a);
	background: rgba(0, 0, 0, .46);
	box-shadow: 0 0 0 3px var(--lg-b-suave);
}
.lg-campo input:read-only { color: rgba(255, 255, 255, .55); }

/* com o rótulo flutuante, o placeholder existe só para o :placeholder-shown detectar campo vazio */
.lg-campo input::placeholder { color: transparent; }

.lg-campo > span.fa {
	position: absolute;
	left: 17px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: rgba(255, 255, 255, .32);
	pointer-events: none;
	transition: color .18s ease;
}
.lg-campo input:focus ~ span.fa { color: var(--lg-a); }

.lg-campo label {
	position: absolute;
	left: 47px;
	top: 10px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .42);
	pointer-events: none;
	transition: all .16s ease;
}

/* vazio e sem foco: o rótulo desce e vira o próprio placeholder */
.lg-campo input:placeholder-shown:not(:focus) ~ label {
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, .32);
}

/* o preenchimento automático do Chrome pinta o campo de azul e some com o texto branco */
.lg-campo input:-webkit-autofill,
.lg-campo input:-webkit-autofill:hover,
.lg-campo input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 60px #16161c inset;
	caret-color: #fff;
}

/* ---- olho da senha --------------------------------------------------------------------------------
   `left: auto` é defensivo: o botão carrega a classe .fa e, se alguma regra futura voltar a lhe dar
   um `left`, o `right` seria simplesmente ignorado e ele encostaria no ícone da esquerda. */

.lg-campo.com-olho input { padding-right: 54px; }

.lg-olho {
	position: absolute;
	left: auto;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, .32);
	font-size: 14px;
	cursor: pointer;
	transition: color .16s ease, background .16s ease;
}
.lg-olho:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* ---- botão ---------------------------------------------------------------------------------------- */

.lg-entrar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 54px;
	margin-top: 18px;
	border-radius: 15px;
	background: #fff;
	border: none;
	color: #14141a;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
	box-shadow: 0 14px 34px -14px var(--lg-a);
}
.lg-entrar:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 20px 44px -14px var(--lg-a); }
.lg-entrar:active:not(:disabled) { transform: scale(.985); }
.lg-entrar:disabled { opacity: .55; cursor: default; box-shadow: none; }

.lg-entrar .fa-spinner { animation: lg-girar .9s linear infinite; }

@keyframes lg-girar { to { transform: rotate(360deg); } }

/* .lg-rodape saiu: trazia marca fixa numa tela que milhares de revendas usam com marca própria */

/* ---- chave "conhecer o player novo" ----------------------------------------------------------------
 *
 * Opt-in do cliente: quem quiser experimentar o player novo marca aqui e entra nele; quem não marcar
 * segue no de sempre. A escolha é lembrada em cookie, então não precisa remarcar a cada entrada.
 *
 * SEM :has() e SEM color-mix() de propósito. Esta tela atende justamente os navegadores antigos — os
 * mesmos que podem não rodar o player novo — e ali aqueles recursos não existem (Chrome 105 e 111).
 * O estado sai do seletor de irmão `input:checked ~ …`, que funciona em qualquer navegador.
 */

.lg-novo {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin-top: 14px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 14px;
	background: rgba(255, 255, 255, .022);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	text-align: left;
}

/* o input fica fora de vista mas continua focável pelo teclado */
.lg-novo input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.lg-novo-txt { flex: 1 1 auto; min-width: 0; }

.lg-novo-t {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .72);
}

.lg-novo-d {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.35;
	color: rgba(255, 255, 255, .36);
}

.lg-chave {
	flex: 0 0 auto;
	position: relative;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	transition: background .2s ease;
}

.lg-chave::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: -webkit-transform .2s ease;
	transition: transform .2s ease;
}

.lg-novo input:checked ~ .lg-chave { background: var(--lg-a); }

.lg-novo input:checked ~ .lg-chave::after {
	-webkit-transform: translateX(18px);
	transform: translateX(18px);
}

.lg-novo input:focus ~ .lg-chave {
	outline: 2px solid var(--lg-a);
	outline-offset: 2px;
}

/* ---- telas curtas ---------------------------------------------------------------------------------- */

@media (max-height: 620px) {
	.lg-caixa { padding-top: 26px; }
	.lg-marca { width: 62px; height: 62px; margin-bottom: 14px; }
	.lg-sub { margin-bottom: 18px; }
}

/* quem prefere menos movimento não recebe nenhum */
@media (prefers-reduced-motion: reduce) {
	.lg-aurora, .lg-marca::before, .lg-marca::after, .lg-caixa, .lg-erro { animation: none; }
}