body {
	margin:0;
	color:#edf3ff;
	background:#c8c8c8;
	/* Imagem local, não CDN externo (era https://images.hdqwalls.com/... antes
	   — o TODO daqui pedindo essa troca já existia no arquivo).

	   JPG e não PNG (2026-08-28): mesma imagem, mesma resolução (1920x1280), mas
	   412 KB em vez de 780 KB. Fundo fotográfico não ganha nada com PNG — ele
	   existe para preservar transparência e áreas de cor plana, que aqui não há.
	   São ~370 KB a menos na primeira tela que todo cliente abre.

	   O PNG continua na pasta de propósito, como alternativa. */
	background:url("/img/bgs/img(1).jpg") fixed;
	background-size: cover;
	font:600 16px/18px 'Open Sans',sans-serif;
}
:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}

.login-wrap{
	width: 100%;
	margin:auto;
	max-width:510px;
	/* min-height:535px; */
	position:relative;
	/* TODO CONFIRME ISSO POIS ACHO QUE PODE TIRAR */
	background:url(https://maxcdn.icons8.com/app/uploads/2016/03/material-1-1000x563.jpg) no-repeat center;
	background-size: cover;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
	width:100%;
	height:100%;
	/* position:absolute; */
	padding:40px 70px 0px 70px;
	background:rgba(0,0,0,0.5);
}
.login-html .sign-in-htm,
.login-html .for-pwd-htm{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	-webkit-transform:rotateY(180deg);
	        transform:rotateY(180deg);
	-webkit-backface-visibility:hidden;
	        backface-visibility:hidden;
	-webkit-transition:all .4s linear;
	transition:all .4s linear;
}
.login-html .sign-in,
.login-html .for-pwd,
.login-form .group .check{
	display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
	text-transform:uppercase;
}
.login-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.tab2 {
	float: right;
    margin-right: 0!important;
}
.login-html .sign-in:checked + .tab,
.login-html .for-pwd:checked + .tab{
	color:#fff;
	width: 100%;
    text-align: center;
	margin: 0 auto 20px auto;
}
.login-form{
	min-height:345px;
	position:relative;
	-webkit-perspective:1000px;
	        perspective:1000px;
	-webkit-transform-style:preserve-3d;
	        transform-style:preserve-3d;
}
.login-form .group{
	margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-form .group .input,
.login-form .group .button{
	border:none;
	padding:15px 20px;
	border-radius:25px;
	background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
	text-security:circle;
	-webkit-text-security:circle;
}
.login-form .group .label{
	color:#aaa;
	font-size:12px;
}
.login-form .group .button{
	background:#e4c332;
}
.login-form .group .button:hover{
	background:#a48e2e;
	color: antiquewhite;
	transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	-webkit-transition:all .2s ease-in-out 0s;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	-webkit-transform:scale(0) rotate(0);
	        transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	-webkit-transform:scale(0) rotate(0);
	        transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
	color:#fff;
}
.login-form .group .check:checked + label .icon{
	background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
	-webkit-transform:scale(1) rotate(45deg);
	        transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	-webkit-transform:scale(1) rotate(-45deg);
	        transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .for-pwd + .tab + .login-form .sign-in-htm{
	-webkit-transform:rotate(0);
	        transform:rotate(0);
}
.login-html .for-pwd:checked + .tab + .login-form .for-pwd-htm{
	-webkit-transform:rotate(0);
	        transform:rotate(0);
}

.hr{
	height:2px;
	margin:25px 0 15px 0;
	background:rgba(255,255,255,.2);
}
.foot-lnk{
	text-align:center;
}
.imgSpinner {
	height: 50px;
}
@media only screen and (max-width: 500px){
	.login-wrap{
		max-width: 420px;
	}
	.login-html .tab{
		font-size:16.9px;
	}
}
@media only screen and (max-width: 420px){
	.login-wrap{
		max-width: 350px;
	}
	.login-html .tab{
		font-size:12.1px;
	}
}

/* ── Link do teste grátis (login-new.blade.php) ──────────────────────────────
 *
 * O "Entrar" é #e4c332 sólido — a única cor forte da tela, e assim deve
 * continuar: quem já é cliente vem aqui todo dia e não pode ter que escolher
 * entre dois botões. Este link usa a MESMA cor, mas só no texto, com a caixa
 * transparente. Fica visível para quem está procurando por ele e não disputa
 * o olhar de quem não está.
 */
.link-teste-gratis{
	display:inline-block;
	padding:8px 16px;
	border:1px solid rgba(228,195,50,.45);
	border-radius:24px;
	color:#e4c332;
	font-size:14px;
	line-height:1.2;
	transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.link-teste-gratis strong{
	font-weight:700;
	white-space:nowrap;
}
.link-teste-gratis:hover,
.link-teste-gratis:focus-visible{
	background:rgba(228,195,50,.12);
	border-color:#e4c332;
	color:#f4dd7a;
}
/* Contorno próprio no foco: o reset do topo zera outline em <a>, e sem isto
 * quem navega por teclado não enxerga onde está. */
.link-teste-gratis:focus-visible{
	outline:2px solid #e4c332;
	outline-offset:3px;
}
.link-teste-gratis .seta{
	margin-left:6px;
	font-size:12px;
	transition:transform .25s ease;
}
.link-teste-gratis:hover .seta{
	transform:translateX(4px);
}

/* A seta pisca uma vez, alguns segundos depois da tela abrir. A ideia é ser
 * notada por quem ficou parado sem saber o que fazer, sem incomodar quem já
 * está digitando a senha — por isso o atraso, e por isso roda só uma vez. */
@keyframes tgAcenar{
	0%,100%{transform:translateX(0)}
	25%{transform:translateX(5px)}
	50%{transform:translateX(0)}
	75%{transform:translateX(5px)}
}
.link-teste-gratis .seta{
	animation:tgAcenar 1.1s ease 4s 1;
}

@media (prefers-reduced-motion: reduce){
	.link-teste-gratis,
	.link-teste-gratis .seta{
		transition:none;
		animation:none;
	}
	.link-teste-gratis:hover .seta{
		transform:none;
	}
}
/* ══════════════════════════════════════════════════════════════════════════
 * Cartão de autenticação — visual inspirado no login do tema Dashtreme
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Tudo aqui é escopado em .auth-wrap / .auth-card, que só a tela de login usa.
 * As regras genéricas .login-wrap / .login-html continuam intactas porque
 * autenticacao/acesso-bloqueado.blade.php também as usa — e aquela tela tem QR
 * code e PIX copia-e-cola, que não cabem num cartão estreito como este.
 *
 * Onde eu precisei vencer uma regra que já existia lá em cima, o seletor é
 * composto (.login-html.auth-card) em vez de contar com a ordem do arquivo.
 * Ordem se perde no dia em que alguém reorganizar o CSS; especificidade não.
 */

.login-wrap.auth-wrap{
	max-width:27rem;
	/* O `margin:auto` da regra genérica .login-wrap centraliza na horizontal;
	   o `auto` das laterais precisa continuar aí, senão o cartão encosta na
	   esquerda. A margem de baixo é a mesma de cima para o rodapé não colar no
	   fim da janela quando a tela é curta. */
	margin:30px auto 30px auto;
	/* O tema não tem foto dentro do cartão — só o fundo do body aparecendo
	   através do preto translúcido. Isso também derruba uma das duas imagens
	   que esta folha ainda busca de CDN externo. */
	background:none;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24), 0 17px 50px 0 rgba(0,0,0,.19);
	border-radius:6px;
	overflow:hidden;
}

.login-html.auth-card{
	padding:0;
	background:rgba(0,0,0,.55);
}

.auth-corpo{
	padding:28px 30px 22px 30px;
}

.auth-logo{
	text-align:center;
	margin-bottom:14px;
}
.auth-logo img{
	max-width:62%;
	height:auto;
}

/* ── Título do cartão ────────────────────────────────────────────────────────
 * Os dois <label> das abas viram o título. Só o do painel ativo aparece — no
 * layout antigo o rótulo "Login" ficava sobrando na tela de recuperação de
 * senha, parecendo um botão que não fazia nada.
 */
.login-html.auth-card .tab{
	display:none;
	float:none;
	margin:0;
	padding:0;
	border-bottom:none;
}
.login-html.auth-card .sign-in:checked + .tab,
.login-html.auth-card .for-pwd:checked + .tab{
	display:block;
	width:100%;
	margin:0 0 18px 0;
	color:#fff;
	font-size:16px;
	font-weight:600;
	letter-spacing:1px;
	text-align:center;
	text-transform:uppercase;
}

/* ── Campos ──────────────────────────────────────────────────────────────────
 * Retângulo translúcido, sem borda, texto branco — como o .form-control do
 * tema. O respiro à direita é para o ícone não sentar em cima do texto quando
 * o campo está cheio.
 */
.auth-card .login-form .group{
	margin-bottom:14px;
}
.auth-card .login-form .group .input{
	padding:12px 44px 12px 16px;
	border-radius:4px;
	background:rgba(255,255,255,.2);
	font-size:15px;
	font-weight:400;
	letter-spacing:.3px;
}
.auth-card .login-form .group .input::placeholder{
	color:rgba(255,255,255,.65);
	font-weight:400;
}
.auth-card .login-form .group .input:focus{
	outline:none;
	background:rgba(0,0,0,.28);
	box-shadow:0 0 0 .2rem rgba(255,255,255,.45);
}

.campo-icone{
	position:relative;
}
.campo-icone .icone-campo{
	position:absolute;
	top:0;
	right:0;
	width:44px;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	color:rgba(255,255,255,.55);
	font-size:14px;
	pointer-events:none;
}

/* ── Botão ───────────────────────────────────────────────────────────────────
 * O Dashtreme usa botão translúcido branco. Aqui ele continua dourado: é a
 * única cor cheia da tela, e sobre a foto vermelha um botão translúcido some.
 * Quem chega aqui todo dia precisa achar o "Entrar" sem procurar.
 */
.auth-card .login-form .group .button{
	padding:12px 20px;
	border-radius:4px;
	font-size:14px;
	letter-spacing:1px;
}

/* ── "Manter conectado por 30 dias" ──────────────────────────────────────────
 * Mesmo vocabulário do .auth-secundario logo abaixo (13px, branco a 75%): é
 * texto de apoio, não compete com os campos. O que muda é a margem — sobe
 * colado no campo de senha, porque a caixa se refere ao ato de entrar, não é
 * mais um campo da lista.
 *
 * ⚠️ Nada de Bootstrap aqui. Este layout NÃO carrega o framework (ver o
 * comentário em layouts/login.blade.php), então .form-check e afins não existem.
 */
.auth-card .login-form .group.campo-lembrar{
	margin-top:-4px;
	margin-bottom:16px;
}
.campo-lembrar label{
	display:flex;
	align-items:center;
	gap:8px;
	margin:0;
	color:rgba(255,255,255,.75);
	font-size:13px;
	font-weight:400;
	cursor:pointer;
	transition:color .2s ease;
}
.campo-lembrar label:hover{
	color:#fff;
}
.campo-lembrar input[type="checkbox"]{
	width:16px;
	height:16px;
	margin:0;
	flex:0 0 auto;
	cursor:pointer;
	/* accent-color pinta a caixa marcada sem precisar redesenhar o controle
	 * inteiro — e o controle nativo é o que continua funcionando no leitor de
	 * tela e no teclado. O dourado é o mesmo do botão "Entrar". */
	accent-color:#e4c332;
}
/* O anel de foco precisa existir: a caixa é operável por teclado e, sem ele,
 * some contra a foto vermelha do fundo. Mesmo anel dos campos de texto. */
.campo-lembrar input[type="checkbox"]:focus-visible{
	outline:none;
	box-shadow:0 0 0 .2rem rgba(255,255,255,.45);
}

/* ── Links secundários dentro do cartão ─────────────────────────────────────── */
.auth-secundario{
	margin-top:16px;
}
.auth-secundario a{
	color:rgba(255,255,255,.75);
	font-size:13px;
	font-weight:400;
	transition:color .2s ease;
}
.auth-secundario a:hover,
.auth-secundario a:focus-visible{
	color:#fff;
	text-decoration:underline;
}

/* ── Rodapé ──────────────────────────────────────────────────────────────────
 * Separado por uma linha, como o card-footer do tema. Fica fora do .login-form
 * para não girar junto com os painéis.
 */
.auth-rodape{
	padding:16px 20px;
	text-align:center;
	border-top:1px solid rgba(255,255,255,.12);
	background:rgba(0,0,0,.15);
}

/* ── Altura do palco dos painéis ─────────────────────────────────────────────
 *
 * Os dois painéis são position:absolute — é assim que um fica por cima do outro
 * durante o giro. O problema é que absoluto sai do fluxo: nenhum dos dois
 * empurra a altura do cartão, e o palco precisava de um min-height chutado à
 * mão. Chute alto demais deixa um vão morto embaixo do "Esqueceu a senha?";
 * chute baixo demais faz o conteúdo vazar para fora do preto, sem aviso nenhum.
 *
 * A saída é o painel ATIVO voltar para o fluxo. Só ele: o inativo continua
 * absoluto, sobreposto e virado de costas. Assim a altura do cartão passa a ser
 * exatamente a do que está na tela, e some tanto o vão quanto a conta a manter.
 *
 * `top:0;left:0` continuam valendo e não deslocam nada em position:relative;
 * `right`/`bottom` são simplesmente ignorados nesse modo.
 */
.login-html.auth-card .sign-in:checked + .tab + .for-pwd + .tab + .login-form .sign-in-htm,
.login-html.auth-card .for-pwd:checked + .tab + .login-form .for-pwd-htm{
	position:relative;
}

/* Piso, só para o cartão não colapsar caso os dois painéis fiquem escondidos
   em algum estado que eu não previ. */
.auth-card .login-form{
	min-height:150px;
}

@media only screen and (max-width: 500px){
	.login-wrap.auth-wrap{
		max-width:calc(100% - 24px);
	}
	.auth-corpo{
		padding:24px 20px 18px 20px;
	}
	.login-html.auth-card .sign-in:checked + .tab,
	.login-html.auth-card .for-pwd:checked + .tab{
		font-size:15px;
	}
}

/* O link do teste grátis nasceu como pílula contornada, quando morava solto no
 * meio do formulário e precisava se sustentar sozinho. Dentro do rodapé ele já
 * tem uma faixa e uma linha separando — a pílula por cima disso vira moldura
 * dentro de moldura. Aqui ele volta a ser texto, com o dourado só no que
 * importa, como o "Sign Up here" do tema. */
.auth-rodape .link-teste-gratis{
	display:inline;
	padding:0;
	border:none;
	border-radius:0;
	color:rgba(255,255,255,.75);
	font-size:13.5px;
}
.auth-rodape .link-teste-gratis strong{
	color:#e4c332;
}
.auth-rodape .link-teste-gratis:hover,
.auth-rodape .link-teste-gratis:focus-visible{
	background:none;
	color:rgba(255,255,255,.9);
}
.auth-rodape .link-teste-gratis:hover strong{
	color:#f4dd7a;
	text-decoration:underline;
}
.auth-rodape .link-teste-gratis .seta{
	color:#e4c332;
}