@charset "UTF-8";
/* Tokens de cor e fonte definidos em DesignSystem.css */
/* Sprint 3 - Login split-panel */

/* ----- Reset base ----- */
*, *::before, *::after { box-sizing: border-box; }

body {
margin: 0;
font-family: var(--font-sans);
background: var(--bg-primary);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
-moz-user-select: none; -webkit-user-select: none;
-ms-user-select: none; user-select: none;
}

button { border: none; outline: none; background: none; cursor: pointer; }
input  { outline: none; border: none; background: none; }

/* ----- Layout split ----- */
.login-layout {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
max-width: 1400px;
margin: 0 auto;
box-shadow: -30px 0 60px rgba(0, 0, 0, 0.10), 30px 0 60px rgba(0, 0, 0, 0.10);
}


/* ----- Painel da marca (esquerda) ----- */
.login-brand {
background: linear-gradient(155deg, #0D5E5E 0%, #061414 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 60px 56px;
position: relative;
overflow: hidden;
}

.login-brand::before {
content: '';
position: absolute;
width: 500px; height: 500px;
border-radius: 50%;
border: 1px solid rgba(0, 200, 212, 0.12);
top: -120px; right: -160px;
pointer-events: none;
}

.login-brand::after {
content: '';
position: absolute;
width: 300px; height: 300px;
border-radius: 50%;
border: 1px solid rgba(0, 200, 212, 0.08);
bottom: 40px; left: -80px;
pointer-events: none;
}

/* Assinatura shots.analytics canto superior esquerdo */
.brand-corner-logo {
position: absolute;
top: 24px; left: 32px;
z-index: 2;
}

.brand-corner-text {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.65);
letter-spacing: -0.2px;
}

.brand-corner-text .dot { color: #3DE8E0; }

/* Logo analytics.manager centralizado */
.brand-am-logo {
margin: 0 auto 28px;
}

.brand-am-text {
font-family: var(--font-sans);
font-size: 28px;
font-weight: 700;
letter-spacing: -1px;
white-space: nowrap;
}

.brand-am-text .pre { color: rgba(255, 255, 255, 0.50); }
.brand-am-text .dot { color: #3DE8E0; }
.brand-am-text      { color: #FFFFFF; }

/* Conteudo central */
.login-brand-inner {
position: relative;
z-index: 1;
text-align: center;
max-width: 340px;
}

/* Logo HTML - shots.analytics pill sutil */
.brand-logo-mock {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 56px;
margin: 0 auto 28px;
background: rgba(255, 255, 255, 0.15);
border-radius: 8px;
}

.brand-logo-text {
font-family: var(--font-sans);
font-size: 22px;
font-weight: 700;
color: #FFFFFF;
letter-spacing: -1px;
white-space: nowrap;
}

.brand-logo-text .dot { color: #3DE8E0; }

.brand-sub {
font-size: 14px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.7;
margin: 0;
}

.brand-features {
margin-top: 36px;
text-align: left;
display: flex;
flex-direction: column;
gap: 14px;
}

.brand-feature {
display: flex;
align-items: center;
gap: 12px;
color: rgba(255, 255, 255, 0.75);
font-size: 13px;
}

.brand-feature-icon {
width: 32px; height: 32px;
border-radius: 8px;
background: rgba(0, 200, 212, 0.15);
display: flex;
align-items: center;
justify-content: center;
color: #3DE8E0;
flex-shrink: 0;
}

/* ----- Painel do formulario (direita) ----- */
.login-form-panel {
background: var(--bg-primary);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 56px;
min-height: 100vh;
position: relative;
}

/* Botão de tema no canto superior direito do painel */
.login-theme-btn {
position: absolute;
top: 20px;
right: 20px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: var(--text-muted);
background: none;
border: none;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}

.login-theme-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}

/* Ícone sol visível no light, lua no dark */
.login-theme-icon-light { display: block; }
.login-theme-icon-dark  { display: none; }

[data-theme="dark"] .login-theme-icon-light { display: none; }
[data-theme="dark"] .login-theme-icon-dark  { display: block; }

.login-form-inner {
width: 100%;
max-width: 360px;
display: flex;
flex-direction: column;
}

/* Cabecalho */
.form-header { margin-bottom: 32px; }

.form-header h2 {
font-family: var(--font-sans);
font-size: 24px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.4px;
margin: 0 0 6px 0;
}

.form-header p {
font-size: 14px;
color: var(--text-muted);
margin: 0;
}

/* ----- Campos ----- */
.login-field { margin-bottom: 18px; }

.login-field label {
display: block;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 7px;
}

.login-field input {
width: 100%;
font-family: var(--font-sans);
font-size: 15px;
color: var(--text-primary);
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
transition: border-color 0.15s, box-shadow 0.15s;
}

.login-field input:focus {
border-color: #00C8D4;
box-shadow: 0 0 0 3px rgba(0, 200, 212, 0.15);
}

.login-field input::placeholder { color: var(--text-disabled); }

/* Campo senha com botao olho */
.login-field-senha { position: relative; }
.login-field-senha input { padding-right: 46px; }

.btn-olho {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
opacity: 0.55;
transition: opacity 0.15s;
cursor: pointer;
background: none;
border: none;
padding: 0;
}

.btn-olho:hover { opacity: 0.9; }
.btn-olho img { width: 20px; height: 20px; }

/* ----- Captcha ----- */
.login-captcha { margin-bottom: 16px; }

.login-captcha input {
width: 100%;
font-family: var(--font-sans);
font-size: 15px;
color: var(--text-primary);
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
transition: border-color 0.15s;
}

.login-captcha input:focus {
border-color: #00C8D4;
box-shadow: 0 0 0 3px rgba(0, 200, 212, 0.15);
outline: none;
}

.img_codigo {
display: block;
margin: 8px 0;
border-radius: 4px;
}

/* ----- Botoes ----- */
.btn-login {
width: 100%;
margin-top: 4px;
padding: 13px;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
color: #FFFFFF;
background: #0D5E5E;
border-radius: 8px;
transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
letter-spacing: 0.01em;
cursor: pointer;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.btn-login:hover {
background: #00C8D4;
box-shadow: 0 4px 20px rgba(0, 200, 212, 0.30);
}

.btn-login:disabled,
.btn-login[disabled] {
background: var(--border-strong);
cursor: not-allowed;
box-shadow: none;
opacity: 0.7;
}

.btn-login-spinner {
display: flex;
align-items: center;
gap: 8px;
}

.spin-inline {
animation: spin 0.7s linear infinite;
}

.btn-esqueceu {
width: 100%;
background: none;
padding: 14px 0 0;
text-align: center;
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-muted);
transition: color 0.15s;
cursor: pointer;
border: none;
}

.btn-esqueceu:hover { color: #00C8D4; }

/* ----- Status feedback ----- */
.login-status { margin-top: 16px; }

.status {
font-family: var(--font-sans);
font-weight: 500;
font-size: 13px;
display: block;
padding: 10px 14px;
border-radius: 8px;
}

.status1 { background: var(--statusbar-success-bg); color: var(--statusbar-success-text); }
.status2 { background: var(--statusbar-error-bg);   color: var(--statusbar-error-text);   }

/* ----- Rodape ----- */
.login-footer {
padding-top: 32px;
text-align: center;
width: 100%;
max-width: 360px;
}

/* CTA de licença */
.login-cta-licenca {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}

.login-cta-txt {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-muted);
}

.login-cta-btn {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--brand-500);
text-decoration: none;
border: 1px solid var(--brand-500);
border-radius: 20px;
padding: 4px 14px;
transition: background 0.15s, color 0.15s;
}

.login-cta-btn:hover {
background: var(--brand-500);
color: #fff;
}

/* Link para o site institucional (legado — mantido para compatibilidade) */
.login-site-link {
display: block;
text-align: center;
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-muted);
text-decoration: none;
margin-bottom: 10px;
transition: color 0.15s;
}

.login-site-link:hover { color: #00C8D4; }

/* Utilitarios usados pelo xRodape.jsp */
.txt_rodape,
.txt_subtitulo {
font-family: var(--font-sans);
font-weight: 500;
color: var(--text-muted);
font-size: 12px;
}

a { text-decoration: none; }

.link:link,
.link:visited,
.link:active { color: var(--text-muted); }
.link:hover   { color: #00C8D4; }

/* ----- Carregamento (xCarregamento.jsp) ----- */
.img_carregar {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.45);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	animation: overlayFadeIn 0.25s ease forwards;
}

@keyframes overlayFadeIn {
	to { opacity: 1; }
}

.carregar-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 36px 48px;
	box-shadow: var(--shadow-lg);
}

.carregar-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--border);
	border-top-color: var(--brand-500);
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.carregar-logo {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	letter-spacing: -0.3px;
}

.carregar-logo .pre { color: var(--text-muted); font-weight: 400; }
.carregar-logo .dot { color: var(--brand-500); }

.carregar-sub {
	font-size: 12px;
	color: var(--text-muted);
	margin-top: -8px;
}

/* ----- Responsivo ----- */
@media (max-width: 860px) {
.login-layout { grid-template-columns: 1fr; }

.login-brand {
min-height: 200px;
padding: 40px 28px;
}

.login-brand::before,
.login-brand::after { display: none; }

.brand-features { display: none; }
.brand-logo-mock { width: 160px; height: 48px; }
.brand-logo-text { font-size: 18px; }

.login-form-panel {
min-height: auto;
padding: 40px 28px;
}
}