/* ==========================================================================
   Meus Envios — página de acesso (login, redirect, logout)
   Layout inspirado no kaki.pt; cores da família de meusenvios.css
   ========================================================================== */

:root {
	--au-bg: #F3F5F7;
	--au-card: #FFFFFF;
	--au-shell: #1D1D1B;
	--au-shell-2: #33332F;
	--au-ink: #1F2D3A;
	--au-text: #2B3641;
	--au-muted: #6F7C88;
	--au-line: #DDE1E4;
	--au-input: #CFD3D8;
	--au-accent: #2C3E50;
	--au-red: #E74C3C;
	--au-red-soft: #FDEDEB;
	--au-radius: 4px;
	--au-accent-600: #1E2A36;
}

html, body.auth { height: 100%; }

body.auth {
	margin: 0;
	background: var(--au-bg);
	color: var(--au-text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	font-optical-sizing: auto;
	font-feature-settings: 'cv11', 'ss03';
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.auth-page {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 24px;
	overflow: hidden;
	box-sizing: border-box;
}

/* Pontilhado muito subtil ao fundo */
.auth-page::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(44, 62, 80, .09) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 75%);
	        mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 75%);
	pointer-events: none;
}

.auth-box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 320px;
	animation: auth-in .5s cubic-bezier(.2, .8, .2, 1) both;
}

/* ---------- Cabeçalho ---------- */
.auth-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-bottom: 28px;
	text-align: center;
}

.auth-mark {
	display: block;
	margin-bottom: 18px;
	color: var(--au-shell);
	line-height: 0;
}
.auth-logo { display: block; width: 136px; height: auto; overflow: visible; }

.auth-title {
	margin: 0;
	color: var(--au-ink);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.auth-desc {
	margin: 0;
	color: var(--au-muted);
	font-size: 14px;
	text-wrap: balance;
}

/* ---------- Formulário ---------- */
.auth-form { display: grid; gap: 20px; }
.auth-field { display: grid; gap: 8px; }

.auth-label {
	margin: 0;
	color: var(--au-text);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.auth-input-wrap { position: relative; }

.auth-input {
	display: block;
	width: 100%;
	height: 40px;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1px solid var(--au-input);
	border-radius: var(--au-radius);
	background: var(--au-card);
	color: var(--au-ink);
	font: inherit;
	font-size: 14px;
	box-shadow: none;
	transition: border-color .15s ease;
}
.auth-input::placeholder { color: #A3ACB4; }
.auth-input:hover { border-color: #B9BEC5; }
.auth-input:focus {
	outline: none;
	border-color: var(--au-accent);
	box-shadow: none;
}
.has-error .auth-input { border-color: var(--au-red); }
.has-error .auth-input:focus { border-color: var(--au-red); }
.auth-error { margin: 0; color: var(--au-red); font-size: 12px; }

.auth-input-wrap .auth-input { padding-right: 42px; }

.auth-reveal {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--au-muted);
	font-size: 16px;
	cursor: pointer;
	border-radius: var(--au-radius);
}
.auth-reveal:hover { color: var(--au-ink); }
.auth-reveal:focus-visible { outline: 2px solid var(--au-accent); outline-offset: -4px; }

.auth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 40px;
	margin-top: 4px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--au-radius);
	background: var(--au-accent);
	color: #fff;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .15s ease, transform .1s ease;
	text-decoration: none;
}
.auth-btn:hover, .auth-btn:focus { background: var(--au-accent-600); color: #fff; text-decoration: none; }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:focus-visible { outline: 2px solid rgba(44, 62, 80, .45); outline-offset: 1px; }
.auth-btn[disabled] { opacity: .7; cursor: progress; }
.auth-btn .ic { font-size: 16px; transition: transform .2s ease; }
.auth-btn:hover .ic-chevron-right { transform: translateX(2px); }

.auth-spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: auth-spin .7s linear infinite;
}
.auth-btn.is-loading .auth-spinner { display: inline-block; }
.auth-btn.is-loading .ic { display: none; }

/* ---------- Mensagens ---------- */
.auth-alert {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 20px;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: var(--au-radius);
	font-size: 13px;
	line-height: 1.45;
	text-align: left;
}
.auth-alert .ic { flex: none; margin-top: 1px; font-size: 16px; }
.auth-alert--error { background: var(--au-red-soft); border-color: #F6C9C3; color: #A8352A; }
.auth-alert--ok { background: #ECF0F1; border-color: #D5DCE1; color: var(--au-accent); }
.auth-alert--warn { background: #FEF6E7; border-color: #F6DFAE; color: #8A5A07; }

/* Página de redirecionamento */
.auth-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border-radius: 50%;
	font-size: 24px;
}
.auth-status--ok { background: #ECF0F1; color: var(--au-accent); }
.auth-status--error { background: var(--au-red-soft); color: var(--au-red); }
.auth-status--warn { background: #FEF6E7; color: #D9900B; }

.auth-progress {
	height: 3px;
	margin: 24px 0 16px;
	overflow: hidden;
	border-radius: 3px;
	background: var(--au-line);
}
.auth-progress span {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--au-accent);
	transform-origin: left;
	animation: auth-progress 3s linear forwards;
}

.auth-link {
	color: var(--au-accent);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(44, 62, 80, .3);
	text-underline-offset: 3px;
}
.auth-link:hover, .auth-link:focus { color: var(--au-ink); text-decoration-color: currentColor; }

.auth-foot {
	margin-top: 32px;
	color: #A3ACB4;
	font-size: 12px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.auth-foot-brand { display: inline-flex; }
/* Logo branco → cinza do rodapé */
.auth-foot-brand img {
	display: block;
	width: 84px;
	height: auto;
	filter: brightness(0);
	opacity: .32;
	transition: opacity .15s ease;
}
.auth-foot-brand:hover img { opacity: .6; }

/* ---------- Envelopes e aviões de papel nas margens ---------- */
.auth-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.auth-deco .fly {
	position: absolute;
	width: var(--s);
	height: var(--s);
	margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
	opacity: var(--o);
	rotate: var(--a);
}

.auth-deco .fly svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	scale: 0;
	rotate: -40deg;
	animation: auth-pop .9s cubic-bezier(.2, 1.4, .4, 1) var(--d) forwards; /* só ao entrar */
}


/* Entradas em pausa enquanto a página está escondida (ver header_simple.tpl) */
html.auth-wait .auth-box,
html.auth-wait .auth-deco .fly svg,
html.auth-wait .auth-progress span { animation-play-state: paused; }
body.auth { transition: opacity .15s ease; }

@keyframes auth-pop { to { scale: 1; rotate: 0deg; } }
@keyframes auth-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
@keyframes auth-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 640px) {
	.auth-deco .fly { scale: .6; }
	.auth-deco .fly.hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.auth-box, .auth-deco .fly svg, .auth-progress span {
		animation-duration: .01ms !important;
		animation-delay: 0s !important;
	}
}