/* Telas de acesso (login, esqueci a senha, cadastro): painel da marca + formulário */
:root { --lg-cor: #00808C; --lg-cor-escura: #00616b; --lg-texto: #1e293b; --lg-suave: #64748b; --lg-borda: #dfe5e8; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.lg-body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--lg-texto); background: #f4f7f8; -webkit-font-smoothing: antialiased; }

.lg-pagina { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

/* Lado da marca */
.lg-marca { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 48px 56px; color: #fff;
	background: radial-gradient(120% 90% at 0% 0%, #10a3ad 0%, transparent 55%), radial-gradient(90% 80% at 100% 100%, #004a52 0%, transparent 60%), var(--lg-cor); }
.lg-marca::after { content: ""; position: absolute; right: -90px; top: -40px; width: 460px; height: 485px; pointer-events: none; background: #fff; opacity: .07;
	-webkit-mask: url(../img/icone.PNG) center / contain no-repeat; mask: url(../img/icone.PNG) center / contain no-repeat; } /* símbolo do InduFácil como marca d'água */
.lg-induvendas { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 16px; max-width: 520px; padding: 18px 20px; border-radius: 18px;
	background: #f4f7f8; color: var(--lg-texto); box-shadow: 0 14px 34px rgba(0, 40, 45, .22); }
.lg-induvendas img { width: 72px; height: 72px; object-fit: contain; }
.lg-iv-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lg-cor); }
.lg-induvendas strong { display: block; margin-top: 2px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.lg-induvendas p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: #475569; }
.lg-iv-chips { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 12px; }
.lg-iv-chips span { white-space: nowrap; padding: 4px 9px; border-radius: 999px; background: rgba(0, 128, 140, .10); color: var(--lg-cor-escura); font-size: 11.5px; font-weight: 600; }
.lg-marca h1 { margin: 0 0 14px; white-space: nowrap; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.lg-marca > div > p { margin: 0; max-width: 44ch; font-size: 16px; line-height: 1.55; opacity: .88; }
.lg-recursos { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lg-recursos li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; }
.lg-recursos svg { flex: 0 0 34px; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .14); }
.lg-marca-rodape { font-size: 12px; opacity: .7; }

/* Lado do formulário */
.lg-lado-form { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px 24px; }
.lg-card { width: 100%; max-width: 400px; }
.lg-logo { display: block; width: 260px; max-width: 80%; height: auto; margin: 0 auto 32px; }
.lg-card h2 { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.lg-sub { margin: 0 0 28px; font-size: 14px; color: var(--lg-suave); }

.lg-erro { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: #fdf0ee; border: 1px solid #f4cdc7; color: #a93226; font-size: 13px; line-height: 1.45; }
.lg-erro:empty { display: none; }

.lg-campo { margin-bottom: 16px; }
.lg-campo label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #334155; }
.lg-input-wrap { position: relative; }
.lg-input-wrap > svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: #94a3b8; pointer-events: none; }
body .lg-campo input.ui-inputfield { width: 100% !important; height: 50px; padding: 0 46px 0 44px !important; border: 1.5px solid var(--lg-borda) !important; border-radius: 12px !important;
	background: #fff !important; font-family: inherit; font-size: 16px !important; color: var(--lg-texto) !important; box-shadow: none !important; transition: border-color .15s, box-shadow .15s; }
body .lg-campo input.ui-inputfield:focus { border-color: var(--lg-cor) !important; box-shadow: 0 0 0 4px rgba(0, 128, 140, .14) !important; outline: none; }
body .lg-campo input.ui-inputfield::placeholder { color: #a6b1ba; }
.lg-campo .ui-password { display: block; width: 100%; }
.lg-olho { position: absolute; right: 6px; top: 50%; width: 38px; height: 38px; margin-top: -19px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: #94a3b8; cursor: pointer; }
.lg-olho:hover { color: var(--lg-cor); background: #f1f5f6; }
.lg-olho:focus-visible { outline: 2px solid var(--lg-cor); }
.lg-olho svg { width: 20px; height: 20px; }
.lg-olho .lg-olho-fechado { display: none; }
.lg-olho.lg-visivel .lg-olho-aberto { display: none; }
.lg-olho.lg-visivel .lg-olho-fechado { display: block; }

.lg-esqueci { display: flex; justify-content: flex-end; margin: -4px 0 20px; }
.lg-esqueci a, .lg-cadastro a { color: var(--lg-cor); font-size: 13px; font-weight: 600; text-decoration: none; }
.lg-esqueci a:hover, .lg-cadastro a:hover { text-decoration: underline; }

body .ui-button.lg-entrar { width: 100%; height: 52px; margin: 0; border: 0 !important; border-radius: 12px !important; background: var(--lg-cor) !important; color: #fff !important;
	font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 8px 20px rgba(0, 128, 140, .25) !important; transition: background-color .15s, transform .1s; }
body .ui-button.lg-entrar:hover { background: var(--lg-cor-escura) !important; }
body .ui-button.lg-entrar:active { transform: translateY(1px); }
body .ui-button.lg-entrar .ui-button-text { padding: 0; line-height: 52px; }

.lg-cadastro { margin: 22px 0 0; text-align: center; font-size: 14px; color: var(--lg-suave); }
.lg-apps { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid #e6ebee; }
.lg-apps img { display: block; height: 40px; width: auto; }
.lg-apps img.lg-google { height: 52px; margin: -6px -2px; } /* a imagem do Google tem margem branca própria: badge visível fica com 40px, igual à Apple */
.lg-apps-titulo { margin: 28px 0 0; text-align: center; font-size: 12px; color: var(--lg-suave); }
.lg-apps-titulo + .lg-apps { margin-top: 10px; padding-top: 0; border-top: 0; }

.lg-rodape { width: 100%; max-width: 400px; margin-top: 36px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; font-size: 12px; color: var(--lg-suave); }
.lg-rodape a { color: var(--lg-suave); text-decoration: none; }
.lg-rodape a:hover { color: var(--lg-cor); }
.lg-rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.lg-zap { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.lg-zap svg { width: 16px; height: 16px; color: #25d366; }

/* Conta cancelada */
.lg-cancelada { text-align: center; }
.lg-cancelada-icone { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: #fdf0ee; color: #c0392b; }
.lg-cancelada-icone svg { width: 30px; height: 30px; }
.lg-cancelada p { font-size: 14px; line-height: 1.55; color: #475569; }
.lg-btn-zap { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin-top: 8px; border-radius: 12px; background: #25d366; color: #fff; font-weight: 700; text-decoration: none; }

/* Celular: só o formulário, logo no topo, toque confortável */
@media (max-width: 900px) {
	.lg-pagina { grid-template-columns: minmax(0, 1fr); }
	.lg-marca { display: none; }
	body.lg-body { background: #fff; }
	.lg-lado-form { justify-content: flex-start; padding: max(28px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); }
	.lg-logo { margin: 8px auto 28px; }
	.lg-card h2, .lg-sub { text-align: center; }
	.lg-rodape { flex-direction: column; justify-content: center; margin-top: 28px; text-align: center; }
	.lg-rodape-links { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
	

/* Título e texto do formulário (esqueci a senha, cadastro) */
.lg-titulo { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.lg-texto { margin: 0 0 24px; font-size: 14px; line-height: 1.55; color: var(--lg-suave); }
.lg-voltar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 24px; color: var(--lg-suave); font-size: 13px; font-weight: 600; text-decoration: none; }
.lg-voltar:hover { color: var(--lg-cor); }
.lg-voltar svg { width: 16px; height: 16px; }
.lg-sucesso { text-align: center; }
.lg-sucesso-icone { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: rgba(38, 166, 152, .12); color: #1e8a7e; }
.lg-sucesso-icone svg { width: 30px; height: 30px; }
.lg-dica { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #f4f7f8; font-size: 13px; line-height: 1.5; color: #475569; text-align: left; }

/* Campos sem ícone (cadastro) e componentes PrimeFaces com o mesmo visual */
body .lg-sem-icone input.ui-inputfield { padding: 0 14px !important; }
.lg-campo .ui-autocomplete, .lg-campo .ui-inputnumber, .lg-campo .ui-inputmask { display: block; width: 100%; }
.lg-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.lg-grade .lg-largo { grid-column: 1 / -1; }
.lg-grade-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 520px) { .lg-grade, .lg-grade-3 { grid-template-columns: minmax(0, 1fr); } }
.lg-secao { display: flex; align-items: center; gap: 10px; margin: 26px 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lg-cor); }
.lg-secao b { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--lg-cor); color: #fff; font-size: 12px; letter-spacing: 0; }
.lg-secao::after { content: ""; flex: 1; height: 1px; background: #e6ebee; }

/* Cadastro: formulário mais largo, painel da marca fixo enquanto rola */
.lg-pagina-cadastro .lg-card { max-width: 620px; }
.lg-pagina-cadastro .lg-lado-form { justify-content: flex-start; padding-top: 48px; }
.lg-pagina-cadastro .lg-marca { position: sticky; top: 0; height: 100vh; height: 100dvh; }

/* Planos */
.lg-planos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
@media (max-width: 420px) { .lg-planos { grid-template-columns: minmax(0, 1fr); } }
.lg-plano { position: relative; display: flex; flex-direction: column; padding: 16px 14px 14px; border-radius: 14px; border: 1.5px solid var(--lg-borda); background: #fff; transition: border-color .15s, box-shadow .15s; }
.lg-plano:hover { border-color: rgba(0, 128, 140, .5); }
.lg-plano-ativo { border-color: var(--lg-cor); box-shadow: 0 0 0 4px rgba(0, 128, 140, .12); }
.lg-plano-selo { position: absolute; top: -10px; left: 14px; padding: 2px 8px; border-radius: 999px; background: #e08a00; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.lg-plano-nome { font-size: 14px; font-weight: 700; }
.lg-plano-preco { margin-top: 4px; font-size: 22px; font-weight: 800; color: var(--lg-cor); font-variant-numeric: tabular-nums; }
.lg-plano-preco small { font-size: 12px; font-weight: 500; color: var(--lg-suave); }
.lg-plano-usuarios { font-size: 12px; color: var(--lg-suave); }
.lg-plano ul { flex: 1; margin: 10px 0 12px; padding: 0; list-style: none; font-size: 12px; line-height: 1.4; color: #475569; }
.lg-plano li { position: relative; padding-left: 16px; margin-top: 4px; }
.lg-plano li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 7px; height: 4px; border-left: 2px solid var(--lg-cor); border-bottom: 2px solid var(--lg-cor); transform: rotate(-45deg); }
a.lg-plano-btn { display: block; padding: 8px; border-radius: 10px; border: 1.5px solid var(--lg-cor); color: var(--lg-cor); font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; }
a.lg-plano-btn:hover { background: rgba(0, 128, 140, .06); }
.lg-plano-ativo a.lg-plano-btn, a.lg-plano-btn.ui-state-disabled { background: var(--lg-cor); color: #fff; opacity: 1; cursor: default; }

.lg-aceite { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 14px; font-size: 13px; line-height: 1.5; color: #475569; }
.lg-aceite a { color: var(--lg-cor); font-weight: 600; }
.lg-avisos { margin: 0 0 16px; padding: 12px 14px 12px 30px; border-radius: 12px; background: #fff8ec; border: 1px solid #f6e1bd; font-size: 12.5px; line-height: 1.5; color: #6b5a3a; }
.lg-avisos li + li { margin-top: 4px; }
.lg-captcha { display: flex; justify-content: center; margin-bottom: 16px; }