/*
 * Login do admin. Mesma identidade da capa do relatorio do Dashboard:
 * papel azul-pastel, Atkinson Hyperlegible e a folha de respostas como
 * elemento de destaque (a correta de cada linha preenche uma unica vez).
 */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap");

.login-iec{
	--tinta:#0f172a;
	--texto:#334155;
	--apoio:#51607a;
	--linha:#cbd5e1;
	--papel:#e9effc;
	--azul:#436fe7;
	--azul-escuro:#0139a6;
	--contorno:#b7c6f0;
	--erro:#c70808;
	--erro-tint:#fdecec;
	margin:0;
	min-height:100vh;
	background:#fff;
	color:var(--texto);
	font-family:"Atkinson Hyperlegible", Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
}
.login-iec *,
.login-iec *:before,
.login-iec *:after{ box-sizing:border-box; }

.login{ display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(380px, .85fr); min-height:100vh; }

/* ---------- lado da folha ---------- */
.login-folha{ position:relative; display:flex; align-items:center; justify-content:center; padding:56px 64px; background:var(--papel); overflow:hidden; }
.login-folha-centro{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; max-width:520px; margin-top:-8vh; text-align:center; }
.login-folha-logo{ width:280px; max-width:100%; height:auto; }
.login-folha-titulo{ margin:40px 0 0; font-size:40px; line-height:1.12; font-weight:700; letter-spacing:-.01em; color:var(--azul-escuro); }
/* selo do app (ex.: "Parceiro" no passe-client) */
.login-selo{ display:inline-block; padding:5px 12px 6px; border-radius:999px; background:var(--azul-escuro); font-size:15px; line-height:1; font-weight:700; letter-spacing:.02em; color:#fff; }
.login-form h1 .login-selo{ margin-left:8px; font-size:14px; vertical-align:middle; position:relative; top:-3px; }

/* swipe: uma faixa azul varre o titulo e o revela (uma vez, ao abrir) */
.swipe{ position:relative; display:inline; animation:revela 0s linear .75s both; }
.login-folha-titulo{ position:relative; }
.login-folha-titulo:after{ content:""; position:absolute; inset:-4px -8px; background:var(--azul); transform:scaleX(0); transform-origin:left center; animation:varre 1.1s cubic-bezier(.77,0,.18,1) .3s both; }
@keyframes revela{ from{ opacity:0; } to{ opacity:1; } }
@keyframes varre{
	0%{ transform:scaleX(0); transform-origin:left center; }
	45%{ transform:scaleX(1); transform-origin:left center; }
	55%{ transform:scaleX(1); transform-origin:right center; }
	100%{ transform:scaleX(0); transform-origin:right center; }
}

/* linha de caneta: desenha da esquerda pra direita depois do swipe */
.rabisco{ width:62%; height:22px; margin-top:14px; overflow:visible; }
.rabisco path{ fill:none; stroke:var(--azul); stroke-width:3.5; stroke-linecap:round; stroke-dasharray:360; stroke-dashoffset:360; animation:escreve .9s cubic-bezier(.6,0,.2,1) 1.45s forwards; }
@keyframes escreve{ to{ stroke-dashoffset:0; } }

/* folha de respostas decorativa, espiando pelo canto inferior direito */
.gabarito{ position:absolute; right:-60px; bottom:-230px; margin:0; padding:34px 40px 30px; background:#fff; border:1px solid #cdd8f4; border-radius:8px; box-shadow:0 30px 60px -34px rgba(1,57,166,.4); transform:rotate(-7deg) scale(.72); transform-origin:bottom right; opacity:.9; }
.gabarito-linha{ display:flex; align-items:center; gap:12px; height:52px; }
.gabarito-marca{ display:block; width:14px; height:5px; margin-right:8px; background:var(--tinta); }
.gabarito-num{ width:26px; margin-right:8px; text-align:right; font-size:19px; font-weight:700; color:var(--tinta); }
.bolha{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:2px solid var(--contorno); border-radius:50%; font-size:15px; font-weight:700; line-height:1; color:var(--contorno); }
.bolha.marcada{ background:var(--azul); border-color:var(--azul); color:#fff; animation:preenche .35s cubic-bezier(.2,.7,.3,1) both; animation-delay:calc(.35s + var(--ordem) * .12s); }
@keyframes preenche{
	from{ background:transparent; border-color:var(--contorno); color:var(--contorno); transform:scale(.82); }
	to{ background:var(--azul); border-color:var(--azul); color:#fff; transform:scale(1); }
}

/* ---------- formulario ---------- */
.login-form{ display:flex; flex-direction:column; justify-content:center; width:100%; max-width:440px; margin:0 auto; padding:56px 40px; }
.login-form-logo{ display:none; width:132px; height:auto; margin-bottom:40px; }
.login-form h1{ margin:0; font-size:32px; line-height:1.15; font-weight:700; color:var(--tinta); }
.login-form-apoio{ margin:8px 0 28px; font-size:15px; line-height:1.45; color:var(--apoio); }

.login-alerta{ margin:0 0 20px; padding:12px 14px; border-left:3px solid var(--erro); border-radius:4px; background:var(--erro-tint); font-size:14px; line-height:1.4; color:var(--erro); }

.login-campos{ display:flex; flex-direction:column; gap:20px; }
.campo{ display:flex; flex-direction:column; gap:7px; }
.campo-rotulo{ font-size:14px; font-weight:700; color:var(--tinta); }
.campo input{ width:100%; height:48px; padding:0 14px; border:1.5px solid var(--linha); border-radius:6px; background:#fff; font:inherit; font-size:16px; color:var(--tinta); transition:border-color .15s, box-shadow .15s; }
.campo input:hover{ border-color:#94a3b8; }
.campo input:focus{ outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(67,111,231,.18); }
.campo small{ font-size:13px; color:var(--apoio); }
.campo.invalido input{ border-color:var(--erro); }
.campo.invalido input:focus{ box-shadow:0 0 0 3px rgba(199,8,8,.14); }

.campo-senha{ position:relative; display:block; }
.campo-senha input{ padding-right:92px; }
.campo-mostrar{ position:absolute; top:6px; right:6px; height:36px; padding:0 12px; border:0; border-radius:4px; background:transparent; font:inherit; font-size:13px; font-weight:700; color:var(--azul-escuro); cursor:pointer; }
.campo-mostrar:hover{ background:#edf2fd; }
.campo-mostrar:focus-visible{ outline:2px solid var(--azul); outline-offset:1px; }

.login-botao{ height:50px; margin-top:6px; border:0; border-radius:6px; background:var(--tinta); font:inherit; font-size:16px; font-weight:700; color:#fff; cursor:pointer; transition:background .15s; }
.login-botao:hover{ background:#182338; }
.login-botao:focus-visible{ outline:3px solid var(--azul); outline-offset:2px; }
.login-botao[disabled]{ opacity:.7; cursor:progress; }

/* ---------- telas menores ---------- */
@media (max-width: 1280px){
	.login-folha{ padding:44px; }
	.login-folha-logo{ width:230px; }
	.login-folha-titulo{ font-size:32px; }
	.gabarito{ transform:rotate(-7deg) scale(.6); }
}
@media (max-width: 860px){
	.login{ grid-template-columns:1fr; }
	.login-folha{ display:none; }
	.login-form{ justify-content:flex-start; padding:48px 24px; }
	.login-form-logo{ display:block; }
}

@media (prefers-reduced-motion: reduce){
	.bolha.marcada,
	.swipe,
	.login-folha-titulo:after{ animation:none; }
	.login-folha-titulo:after{ display:none; }
	.rabisco path{ animation:none; stroke-dashoffset:0; }
	.campo input,
	.login-botao{ transition:none; }
}