/* =============================================================================
   Telas de entrada do zero-7 — login, cadastro, esqueci a senha, alterar senha

   Carregado só por elas, pelo componente x-auth.moldura. Desenho próprio sobre
   os tokens cinza do Kumo (kumo.css): --background, --foreground, --border... —
   os mesmos do painel e da área do trader, então o tema escuro e o claro vêm de
   graça pelo body.dark do layout.
   ============================================================================= */

body:has(.entrada) {
	padding: 0;
	background-color: var(--background);
	-webkit-font-smoothing: antialiased;
}

.entrada {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 100dvh;
	color: var(--foreground);
}

@media (min-width: 992px) {
	.entrada {
		grid-template-columns: minmax(440px, 5fr) 7fr;
	}
}

/* ---------- Coluna do formulário --------------------------------------------- */

.entrada__painel {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	padding: 24px 20px;
}

@media (min-width: 576px) {
	.entrada__painel {
		padding: 32px 40px;
	}
}

.entrada__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.entrada__marca img {
	display: block;
	height: 32px;
	width: auto;
}

.entrada__acao {
	font-size: 14px;
	color: var(--muted-foreground);
	text-align: right;
}

.entrada__acao a {
	color: var(--foreground);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--border);
	transition: text-decoration-color .15s;
}

.entrada__acao a:hover {
	text-decoration-color: currentColor;
}

/* Centraliza na sobra vertical: margem automática em cima e embaixo, e não
   justify-content no pai — assim, quando o formulário é maior que a tela (o
   cadastro, num notebook), ele cresce para baixo em vez de vazar por cima. */
.entrada__conteudo {
	width: 100%;
	max-width: 380px;
	margin: auto;
	padding: 40px 0;
}

.entrada__conteudo_largo {
	max-width: 460px;
}

.entrada__cabecalho {
	margin-bottom: 28px;
}

.entrada__titulo {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--foreground);
}

.entrada__subtitulo {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--muted-foreground);
}

/* ---------- Campos ------------------------------------------------------------- */

/* O form-group do x-input traz padding-bottom próprio; aqui o espaçamento é o gap. */
.entrada__campos {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.entrada__campos .form-group {
	padding-bottom: 0;
	margin-bottom: 0;
}

.entrada__dupla {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 576px) {
	.entrada__dupla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.entrada .form-control {
	height: 40px;
}

/* Rótulo com link na mesma linha ("Senha" ... "Esqueceu a senha?"). */
.entrada__rotulo-linha {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.entrada__rotulo-linha label {
	margin: 0;
}

.entrada__link-discreto {
	font-size: 13px;
	color: var(--muted-foreground);
	text-decoration: none;
}

.entrada__link-discreto:hover {
	color: var(--foreground);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Ações -------------------------------------------------------------- */

.entrada__enviar {
	width: 100%;
	height: 40px;
	margin-top: 24px;
	font-size: 14px;
	font-weight: 500;
}

.entrada__divisor {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0 16px;
	font-size: 12px;
	color: var(--muted-foreground);
}

.entrada__divisor::before,
.entrada__divisor::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border);
}

.entrada__secundario {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 40px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: transparent;
	color: var(--foreground);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .15s;
}

.entrada__secundario:hover {
	background: var(--accent);
	color: var(--foreground);
}

.entrada__secundario svg {
	width: 16px;
	height: 16px;
}

/* ---------- Regras da senha (cadastro e alterar senha) ------------------------ */

.entrada__regras {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 16px;
	margin: 0;
	padding: 12px 14px;
	list-style: none;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--tertiary);
}

.entrada__regra {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--muted-foreground);
	transition: color .15s;
}

/* Marca desenhada em CSS: círculo vazado enquanto a regra falha, check verde
   quando passa. Sem ícone no HTML, o JS só troca uma classe. */
.entrada__regra::before {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	opacity: .55;
	transition: background-color .15s, border-color .15s, opacity .15s;
}

.entrada__regra.ok {
	color: var(--foreground);
}

.entrada__regra.ok::before {
	opacity: 1;
	border-color: var(--green);
	background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
}

/* ---------- Aceite dos termos -------------------------------------------------- */

.entrada__aceite {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted-foreground);
	cursor: pointer;
}

.entrada__aceite input {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--primary);
	cursor: pointer;
}

.entrada__aceite a {
	color: var(--foreground);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Rodapé ------------------------------------------------------------- */

.entrada__rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	font-size: 12px;
	color: var(--muted-foreground);
}

.entrada__rodape a {
	color: inherit;
	text-decoration: none;
}

.entrada__rodape a:hover {
	color: var(--foreground);
}

/* ---------- Arte --------------------------------------------------------------- */

.entrada__arte {
	display: none;
}

@media (min-width: 992px) {
	/* Sticky: no cadastro a coluna do formulário rola e a arte fica parada. */
	.entrada__arte {
		position: sticky;
		top: 0;
		display: block;
		height: 100dvh;
		padding: 12px 12px 12px 0;
	}
}

.entrada__arte img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 16px;
	box-shadow: inset 0 0 0 1px var(--border);
}

/* Faixa de leitura no pé da arte: a imagem é escolhida no painel, então o
   texto não pode depender dela ser escura. */
.entrada__legenda {
	position: absolute;
	right: 12px;
	bottom: 12px;
	left: 0;
	padding: 72px 40px 36px;
	border-radius: 0 0 16px 16px;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
	color: #fafafa;
	pointer-events: none;
}

.entrada__legenda p {
	max-width: 420px;
	margin: 12px 0 0;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.entrada__selo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(6px);
	font-size: 12px;
	font-weight: 500;
}