/* =============================================================================
 * Portal do Cliente — folha de estilo própria.
 *
 * O painel interno usa o tema Metronic: plugins.bundle.css e style.bundle.css
 * somam alguns megabytes de CSS pensados para telas densas de desktop, com
 * DataTables, calendário e gráficos. O portal tem sete telas, é consultado do
 * celular e muitas vezes em rede móvel — carregar aquele tema para exibir uma
 * lista de parcelas seria fazer o cliente pagar, em dados e em espera, por
 * componentes que ele nunca vai ver.
 *
 * Daí este arquivo. Mobile-first de verdade: o layout base é o de uma coluna, e
 * o breakpoint só acrescenta espaço quando existe espaço.
 *
 * A IDENTIDADE É A MESMA DA PÁGINA PÚBLICA: dourado sobre fundo escuro, a
 * paleta do logotipo. O portal era cinza e azul, de sistema genérico, e o
 * cliente chega nele vindo de safinanceira.com.br — a troca de aparência no
 * caminho fazia parecer outra empresa. Os tokens abaixo repetem os de
 * landing.css de propósito: as duas folhas são carregadas por páginas
 * diferentes e nunca se encontram na mesma requisição.
 *
 * O DOURADO NÃO É COR DE TEXTO SOBRE BRANCO. No tom da marca (#d4af37) ele fica
 * em torno de 2:1 de contraste sobre claro, abaixo do legível. Sobre superfície
 * clara ele entra escurecido (--ouro-escuro, cerca de 5:1); em cima de escuro,
 * no tom cheio. É a mesma regra que marca.css e landing.css seguem.
 * ========================================================================== */

:root {
	--ouro:        #d4af37;
	--ouro-claro:  #f0d27a;
	--ouro-escuro: #8a6817;
	--tinta:       #0f1115;
	--tinta-suave: #1c1f27;

	--fundo: #f4f6fa;
	--superficie: #ffffff;
	--superficie-suave: #f7f8fa;
	--borda: #e4e7ec;
	--texto: #1f2430;
	--texto-suave: #5b6472;

	/* A cor de ação e de link. Sobre claro é o dourado escurecido; o tom cheio
	   da marca só aparece em cima dos blocos escuros. */
	--primaria: #8a6817;
	--primaria-suave: #faf3df;

	--sucesso: #17a673;
	--sucesso-suave: #e3f5ee;
	--perigo: #d9345b;
	--perigo-suave: #fce8ed;
	--alerta: #b8860b;
	--alerta-suave: #fdf3e0;
	--neutro: #6b7280;
	--neutro-suave: #eef0f4;

	--raio: 14px;
	--sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 16px rgba(16, 24, 40, .06);
	--sombra-alta: 0 10px 30px rgba(16, 24, 40, .12);

	--largura: 1120px;
}

/* No escuro o dourado já tem contraste de sobra, então a cor de ação volta a
   ser o tom cheio da marca. */
@media (prefers-color-scheme: dark) {
	:root {
		--fundo: #14161c;
		--superficie: #1c1f27;
		--superficie-suave: #21242d;
		--borda: #2b2f3a;
		--texto: #e8eaf0;
		--texto-suave: #9aa1ad;

		--primaria: #e0bb4b;
		--primaria-suave: #2a2312;

		--sucesso: #3ecf9a;
		--sucesso-suave: #142c25;
		--perigo: #f76a8a;
		--perigo-suave: #331c23;
		--alerta: #e0aa3e;
		--alerta-suave: #302713;
		--neutro: #9aa1ad;
		--neutro-suave: #23262f;

		--sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .35);
		--sombra-alta: 0 12px 34px rgba(0, 0, 0, .45);
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--fundo);
	color: var(--texto);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--primaria); }

.container {
	width: 100%;
	max-width: var(--largura);
	margin: 0 auto;
	padding: 0 20px;
}

/* --- Cabeçalho -----------------------------------------------------------
 *
 * Escuro, como o da página pública, e não branco: é o primeiro bloco que o
 * cliente vê e o que amarra o portal ao site por onde ele entrou.
 */

.topo {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(15, 17, 21, .96);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(212, 175, 55, .25);
}

.topo-interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 64px;
}

.topo-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }

/* O nome ganhou uma pastilha com a inicial: sobre o fundo escuro, o texto
   cinza solto no canto parecia sobra de layout. */
.topo-usuario { display: flex; align-items: center; gap: 9px; min-width: 0; }

.topo-inicial {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: rgba(212, 175, 55, .16);
	border: 1px solid rgba(212, 175, 55, .4);
	color: var(--ouro-claro);
	font-size: 14px;
	font-weight: 800;
}

.topo-nome {
	font-size: 14px;
	font-weight: 600;
	color: #c9cfdb;
	max-width: 38vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Navegação -----------------------------------------------------------
 *
 * Barra inferior no celular, dentro do cabeçalho escuro no desktop. O polegar
 * alcança a base da tela; o topo, não — por isso o celular mantém a barra
 * embaixo mesmo com o elemento dentro do cabeçalho no HTML: `fixed` tira o
 * bloco do fluxo, e a posição dele no documento deixa de importar.
 */
.navegacao {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--superficie);
	border-top: 1px solid var(--borda);
	display: flex;
	z-index: 10;
	padding-bottom: env(safe-area-inset-bottom);
}

.navegacao a {
	flex: 1;
	text-align: center;
	padding: 10px 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--texto-suave);
	text-decoration: none;
	/* Alvo de toque confortável: o público usa o portal em movimento. */
	min-height: 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
}

.navegacao a.ativo { color: var(--primaria); }
.navegacao svg { width: 22px; height: 22px; }

.conteudo { padding: 22px 0 96px; }

/**
 * O menu só sobe para o cabeçalho quando cabe.
 *
 * São seis itens com rótulo e ícone; somados à marca por extenso e ao nome do
 * cliente, eles passam de mil pixels. Abaixo disso a barra inferior continua
 * sendo a melhor escolha — e não uma degradação, já que é a posição que o
 * polegar alcança.
 */
@media (min-width: 1080px) {
	.navegacao {
		position: static;
		flex: 1 1 auto;
		/* `min-width: 0` deixa o menu encolher em vez de empurrar o cabeçalho
		   para fora da tela, e o overflow é a rede de segurança para quando nem
		   encolhendo couber — um nome de cliente muito longo, o zoom do
		   navegador, uma fonte mais larga que a prevista. */
		min-width: 0;
		overflow-x: auto;
		scrollbar-width: none;
		justify-content: center;
		border-top: 0;
		background: transparent;
		padding-bottom: 0;
		gap: 4px;
	}

	.navegacao::-webkit-scrollbar { display: none; }

	.navegacao a {
		flex: 0 0 auto;
		flex-direction: row;
		gap: 8px;
		min-height: 0;
		padding: 9px 13px;
		border-radius: 9px;
		font-size: 14px;
		white-space: nowrap;
		color: #c9cfdb;
		transition: background-color .15s ease, color .15s ease;
	}

	.navegacao a:hover { background: rgba(255, 255, 255, .07); color: #ffffff; }

	.navegacao a.ativo {
		color: var(--ouro-claro);
		background: rgba(212, 175, 55, .14);
	}

	.navegacao svg { width: 17px; height: 17px; }

	.conteudo { padding: 30px 0 56px; }
}

/* --- Blocos --------------------------------------------------------------- */

.cartao {
	background: var(--superficie);
	border: 1px solid var(--borda);
	border-radius: var(--raio);
	box-shadow: var(--sombra);
	padding: 20px;
	margin-bottom: 14px;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cartao-link { display: block; text-decoration: none; color: inherit; }

/* Só o cartão clicável reage ao ponteiro: levantar um bloco que não leva a
   lugar nenhum promete uma ação que não existe. */
.cartao-link:hover {
	transform: translateY(-2px);
	box-shadow: var(--sombra-alta);
	border-color: rgba(212, 175, 55, .5);
}

/* O cartão do valor principal, no tom da capa do site. Sobre escuro o dourado
   aparece no tom cheio da marca e o número respira. */
.cartao-capa {
	background:
		radial-gradient(620px 300px at 88% -30%, rgba(212, 175, 55, .28), transparent 62%),
		var(--tinta);
	border-color: rgba(212, 175, 55, .28);
	color: #ffffff;
}

.cartao-capa .destaque-rotulo { color: #c9cfdb; }
.cartao-capa .destaque-valor { color: var(--ouro); }
.cartao-capa .destaque-valor.perigo { color: #ff8fa6; }
.cartao-capa .suave { color: #c9cfdb; }
.cartao-capa strong { color: #ffffff; }

/* O trilho da barra acompanha o cartão: o cinza claro do tema, sobre o fundo
   escuro, virava uma faixa branca gritando mais que o próprio preenchimento. */
.cartao-capa .barra { background: rgba(255, 255, 255, .12); }

.titulo-secao {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--texto-suave);
	margin: 26px 0 12px;
}

h1 { font-size: clamp(22px, 3vw, 27px); margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 17px; margin: 0 0 4px; }

.suave { color: var(--texto-suave); font-size: 14px; margin: 0; }

/* Destaque do valor: é o número que o cliente veio buscar. */
.destaque { display: flex; flex-direction: column; gap: 2px; }
.destaque-rotulo { font-size: 13px; color: var(--texto-suave); letter-spacing: .02em; }

.destaque-valor {
	font-size: clamp(30px, 5vw, 40px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
}

.destaque-valor.perigo { color: var(--perigo); }

/* `auto-fit` no lugar de duas colunas fixas: as mesmas quatro métricas ficam
   2x2 na coluna estreita do celular e numa linha só quando há largura. */
.grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 14px;
}

.metrica-rotulo { font-size: 12px; color: var(--texto-suave); }
.metrica-valor { font-size: 19px; font-weight: 700; }

/* Painel de abertura: o valor em destaque e as métricas lado a lado quando a
   tela permite. Empilhados numa página de 1120px, os dois viravam duas faixas
   quase vazias. */
.painel { display: grid; gap: 14px; }

@media (min-width: 900px) {
	.painel { grid-template-columns: 1.25fr 1fr; align-items: stretch; }
	.painel > .cartao { margin-bottom: 0; }
}

/* Lista de contratos: cartões em grade, e não um por linha ocupando a largura
   inteira. */
.grade-cartoes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: 14px;
	align-items: start;
}

.grade-cartoes > .cartao { margin-bottom: 0; }

/* --- Selos ---------------------------------------------------------------- */

.selo {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.selo-success   { background: var(--sucesso-suave); color: var(--sucesso); }
.selo-danger    { background: var(--perigo-suave);  color: var(--perigo); }
.selo-warning   { background: var(--alerta-suave);  color: var(--alerta); }
.selo-primary   { background: var(--primaria-suave); color: var(--primaria); }
.selo-secondary { background: var(--neutro-suave);  color: var(--neutro); }

/* --- Progresso ------------------------------------------------------------ */

.barra {
	height: 8px;
	background: var(--neutro-suave);
	border-radius: 999px;
	overflow: hidden;
	margin-top: 12px;
}

/**
 * O preenchimento é o filho, seja ele qual for.
 *
 * A regra pedia `span`, e a tela do score desenha a barra com um `div`: ali o
 * preenchimento saía sem cor nenhuma e o cliente via só o trilho cinza, como se
 * a nota fosse zero. O seletor de filho cobre as três barras do portal.
 */
.barra > * {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ouro-escuro), var(--ouro));
	transition: width .8s cubic-bezier(.22, .61, .36, 1);
}

/* --- Listas --------------------------------------------------------------- */

.linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--borda);
}

.linha:last-child { border-bottom: 0; }
.linha-principal { min-width: 0; }
.linha-valor { text-align: right; white-space: nowrap; }

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

/* --- Formulários ---------------------------------------------------------- */

.campo { margin-bottom: 16px; }

.campo label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}

.campo input {
	width: 100%;
	/* 16px evita o zoom automático do iOS ao focar o campo. */
	font-size: 16px;
	padding: 13px 14px;
	border: 1px solid var(--borda);
	border-radius: 10px;
	background: var(--superficie);
	color: var(--texto);
}

.campo input:focus {
	outline: 2px solid var(--primaria);
	outline-offset: 1px;
	border-color: var(--primaria);
}

.campo-ajuda { font-size: 13px; color: var(--texto-suave); margin: 6px 0 0; }

.campo-codigo input {
	text-align: center;
	font-size: 28px;
	letter-spacing: .4em;
	font-weight: 700;
	padding: 14px;
}

.aceite { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.aceite input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }

/* O botão da marca: dourado com texto escuro, o mesmo da página pública. */
.botao {
	display: block;
	width: 100%;
	border: 1px solid transparent;
	border-radius: 10px;
	background: linear-gradient(180deg, var(--ouro-claro), var(--ouro));
	color: #241c00;
	font-size: 16px;
	font-weight: 700;
	padding: 14px;
	cursor: pointer;
	min-height: 50px;
	transition: transform .12s ease, filter .12s ease;
}

.botao:hover { transform: translateY(-1px); filter: brightness(1.04); }
.botao[disabled] { opacity: .6; cursor: not-allowed; transform: none; filter: none; }

.botao-secundario {
	background: transparent;
	color: var(--primaria);
	border-color: var(--borda);
	font-weight: 600;
}

.aviso {
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	margin-bottom: 16px;
	display: none;
}

.aviso.visivel { display: block; }
.aviso-erro    { background: var(--perigo-suave);  color: var(--perigo); }
.aviso-ok      { background: var(--sucesso-suave); color: var(--sucesso); }

.rodape {
	text-align: center;
	font-size: 12px;
	color: var(--texto-suave);
	padding: 26px 16px 34px;
	margin: 0;
}

.vazio { text-align: center; color: var(--texto-suave); padding: 34px 8px; }

/* --- Telas públicas -------------------------------------------------------
 *
 * Login e primeiro acesso sobre o fundo escuro da marca, com a caixa branca
 * flutuando: é a primeira tela do portal e a que mais precisa parecer o site.
 */

.publico {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px 16px;
	background:
		radial-gradient(760px 380px at 50% -8%, rgba(212, 175, 55, .22), transparent 62%),
		var(--tinta);
}

.publico-caixa {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	background: var(--superficie);
	border: 1px solid var(--borda);
	border-radius: 18px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
	padding: 26px 24px 28px;
}

.publico-marca { text-align: center; margin-bottom: 22px; }
.publico .rodape { color: #8b93a3; }

.passo { display: none; }
.passo.ativo { display: block; }

/* =============================================================================
 * Animações
 *
 * A REGRA QUE GOVERNA ESTE BLOCO, a mesma de landing.css: nada aqui esconde
 * conteúdo fora de `html.js-anim`. A classe é posta por um script no <head>,
 * então uma página sem JavaScript — por erro, bloqueador ou rede que cortou o
 * arquivo — aparece inteira, sem animação nenhuma. Esconder no CSS e revelar no
 * JS deixaria o portal em branco justamente para quem teve problema de
 * carregamento, e aqui o que ficaria em branco é o saldo devedor.
 * ========================================================================== */

.js-anim .revelar {
	opacity: 0;
	transform: translateY(14px);
}

.js-anim .revelar.visivel {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}

/* Os cartões da mesma grade entram em sequência, e não todos de uma vez: o olho
   acompanha a leitura em vez de receber o bloco pronto. */
.js-anim .revelar.visivel:nth-child(2) { transition-delay: .07s; }
.js-anim .revelar.visivel:nth-child(3) { transition-delay: .14s; }
.js-anim .revelar.visivel:nth-child(4) { transition-delay: .21s; }

/* Na impressão nada some e nada anima: o cliente costuma imprimir a tela do
   contrato para levar consigo. */
@media print {
	.topo, .navegacao { display: none; }
	.js-anim .revelar { opacity: 1; transform: none; }
}