centraliza o form no espaço restante. * - Painel esquerdo sempre dark (identidade da marca). Painel direito * respeita o tema do usuário (LibreChat usa ). * ============================================================= */ body.igepps-auth-page { --igepps-brand-bg: #000000; --igepps-yellow: #f5d52e; --igepps-yellow-soft: rgba(245, 213, 46, 0.12); --igepps-green: #16704a; --igepps-green-hover: #135d3e; --igepps-divider: rgba(245, 213, 46, 0.18); /* Painel direito — DARK */ --igepps-bg: #0c0d10; --igepps-input-bg: #1a1c20; --igepps-input-border: #2a2d33; --igepps-text-primary: #f4f4f5; --igepps-text-secondary: #9ca0a8; --igepps-text-muted: #6b6f78; overflow-x: hidden; } html:has(body.igepps-auth-page) { overflow-x: hidden; } /* Painel direito — LIGHT (quando o LibreChat não tem class="dark" no ) */ html:not(.dark) body.igepps-auth-page { --igepps-bg: #f5f5f4; --igepps-input-bg: #ffffff; --igepps-input-border: #e5e5e5; --igepps-text-primary: #18181b; --igepps-text-secondary: #52525b; --igepps-text-muted: #71717a; } body.igepps-auth-page { background: var(--igepps-bg) !important; } /* ── Wrapper raiz do AuthLayout — empurra pra direita ─────────── */ body.igepps-auth-page > #root > div.relative.flex.min-h-screen.flex-col { background: var(--igepps-bg) !important; padding-left: 50vw; min-height: 100vh; } /* ── Painel esquerdo (overlay fixo) ───────────────────────────── */ .igepps-login-brand-panel { position: fixed; top: 0; left: 0; width: 50vw; height: 100vh; background: var(--igepps-brand-bg); background-image: radial-gradient(circle at 18% 22%, rgba(245, 213, 46, 0.08) 0%, transparent 45%), radial-gradient(circle at 75% 78%, rgba(245, 213, 46, 0.05) 0%, transparent 50%); padding: 56px 64px; /* Grid 3 linhas iguais nas extremidades: o `1fr auto 1fr` faz com que o * hero (no meio, auto) fique EXATAMENTE no centro vertical do painel — * independente do tamanho do logo. Logo ancora no topo (align-self: start) * e footer no rodapé (align-self: end) das suas rows 1fr. */ display: grid; grid-template-rows: 1fr auto 1fr; overflow: hidden; color: #f4f4f5; border-right: 1px solid var(--igepps-divider); z-index: 10; } /* Grafo de constelação no fundo — SVG inline com pontos e linhas amarelas * em baixa opacidade. Reproduz o espírito "rede conectada" da marca Allcance. */ .igepps-login-brand-panel::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.9; pointer-events: none; } .igepps-login-brand-panel > * { position: relative; z-index: 1; } .igepps-login-brand-panel__top { align-self: start; } .igepps-login-brand-panel__top img { display: block; height: 120px; width: auto; max-width: 100%; } .igepps-login-brand-panel__hero { max-width: 540px; /* O hero ocupa a row central (auto) do grid `1fr auto 1fr` — fica * naturalmente no centro vertical do painel. */ } .igepps-login-brand-panel__eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--igepps-yellow); text-transform: uppercase; margin-bottom: 22px; } .igepps-login-brand-panel__headline { font-size: 48px; font-weight: 800; line-height: 1.08; color: #f4f4f5; margin: 0 0 28px 0; letter-spacing: -0.01em; } .igepps-login-brand-panel__headline em { color: var(--igepps-yellow); font-style: normal; } .igepps-login-brand-panel__sub { font-size: 15.5px; line-height: 1.55; color: #b8bcc4; max-width: 460px; margin: 0; } .igepps-login-brand-panel__footer { align-self: end; display: flex; gap: 22px; align-items: center; font-size: 13px; color: #9ca0a8; } .igepps-login-brand-panel__footer a { color: inherit; text-decoration: none; transition: color 150ms; } .igepps-login-brand-panel__footer a:hover { color: var(--igepps-yellow); } .igepps-login-brand-panel__footer .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; } /* ── Esconder elementos do AuthLayout original ───────────────── * Marcados pelo JS via [data-igepps-hidden]: logo do topo, banner. */ body.igepps-auth-page [data-igepps-hidden] { display: none !important; } /* ── Painel direito (form-side) ─────────────────────────────── */ body.igepps-auth-page > #root > div.relative.flex.min-h-screen.flex-col > main { background: var(--igepps-bg) !important; padding: 48px 56px; align-items: center; justify-content: center; min-height: 100vh; } body.igepps-auth-page main > div { background: transparent !important; width: 100% !important; max-width: 440px !important; padding: 0 !important; } /* Badge "ENTRAR" — inserido pelo JS antes do h1 */ .igepps-login-form-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--igepps-yellow-soft); color: var(--igepps-yellow); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; padding: 10px 22px; border-radius: 999px; border: 1px solid transparent; margin-bottom: 24px; } .igepps-login-form-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--igepps-yellow); box-shadow: 0 0 8px var(--igepps-yellow); } /* No tema claro o badge fica amarelo com texto e ponto pretos. */ html:not(.dark) .igepps-login-form-badge { background: var(--igepps-yellow); border-color: var(--igepps-yellow); color: #000000; } html:not(.dark) .igepps-login-form-badge::before { background: #000000; box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); } /* H1 do AuthLayout — "Bem-vindo de volta" */ body.igepps-auth-page main h1 { text-align: left !important; font-size: 40px !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -0.015em !important; color: var(--igepps-text-primary) !important; margin: 0 0 12px 0 !important; } /* Subtítulo — inserido pelo JS depois do h1 */ .igepps-login-form-subtitle { font-size: 15px; color: var(--igepps-text-secondary); margin: 0 0 32px 0; line-height: 1.5; } /* ── Inputs ───────────────────────────────────────────────────── * Estratégia: o JS troca o floating label do LibreChat por placeholder * nativo do input (mais simples, sem bugs de sobreposição). O label * original é escondido via [data-igepps-hidden]. */ body.igepps-auth-page form input[type="text"], body.igepps-auth-page form input[type="email"], body.igepps-auth-page form input[type="password"] { background: var(--igepps-input-bg) !important; border: 1px solid var(--igepps-input-border) !important; color: var(--igepps-text-primary) !important; border-radius: 12px !important; padding: 0 16px !important; font-size: 15px !important; height: 56px !important; transition: border-color 200ms, box-shadow 200ms; } body.igepps-auth-page form input::placeholder { color: var(--igepps-text-muted) !important; opacity: 1; } body.igepps-auth-page form input:focus { border-color: var(--igepps-yellow) !important; outline: none !important; box-shadow: 0 0 0 3px var(--igepps-yellow-soft) !important; } /* Botão "olho" pra mostrar/ocultar senha — inserido pelo JS */ .igepps-login-pwd-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--igepps-text-muted); cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; transition: color 150ms; } .igepps-login-pwd-toggle:hover { color: var(--igepps-text-secondary); } /* Wrapper que o JS adiciona ao redor do input de senha pra posicionar o olho */ .igepps-login-pwd-wrap { position: relative; } /* ── Link "Esqueci minha senha" — verde corporativo ──────────── * O LibreChat já renderiza esse link quando `passwordResetEnabled: true` * (SMTP configurado → vira true). Estilizamos. */ body.igepps-auth-page form a[href$="/forgot-password"] { display: block !important; text-align: right; margin-top: 8px; font-size: 14px; color: var(--igepps-green) !important; text-decoration: none !important; font-weight: 600; padding: 0 !important; } body.igepps-auth-page form a[href$="/forgot-password"]:hover { text-decoration: underline !important; } /* No light mode o verde fica mais escuro pra contraste */ html:not(.dark) body.igepps-auth-page form a[href$="/forgot-password"] { color: var(--igepps-green-hover) !important; } /* ── Botão "Continuar" — verde escuro corporativo ────────────── */ body.igepps-auth-page form button[type="submit"] { background: var(--igepps-green) !important; border: none !important; border-radius: 12px !important; height: 52px !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.01em !important; margin-top: 20px !important; color: #ffffff !important; transition: background 180ms; width: 100% !important; } body.igepps-auth-page form button[type="submit"]:hover:not(:disabled) { background: var(--igepps-green-hover) !important; } body.igepps-auth-page form button[type="submit"]:disabled { opacity: 0.6 !important; } /* ── Esconde texto "Não tem uma conta? Cadastre-se" do LibreChat ─ * O IGEPPS opera por convite (`ALLOW_REGISTRATION=false`). */ body.igepps-auth-page main > div > p:has(a[href*="register"]) { display: none !important; } /* ── Validação prévia do convite (/register) ──────────────────── * Injetados pelo JS (ensureInviteGuard) enquanto o token é validado e, * se inválido, no lugar do formulário. Vide brand/login-redesign.js. */ .igepps-invite-checking { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 15px; color: var(--igepps-text-secondary); } .igepps-invite-checking__spinner { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--igepps-input-border); border-top-color: var(--igepps-yellow); animation: igepps-invite-spin 0.7s linear infinite; } @keyframes igepps-invite-spin { to { transform: rotate(360deg); } } .igepps-invite-expired { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 4px 0; } .igepps-invite-expired__title { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; color: var(--igepps-text-primary); } .igepps-invite-expired__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--igepps-text-secondary); } .igepps-invite-expired__cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-top: 8px; border-radius: 12px; background: var(--igepps-green); color: #ffffff !important; font-size: 15px; font-weight: 600; text-decoration: none !important; transition: background 180ms; } .igepps-invite-expired__cta:hover { background: var(--igepps-green-hover); } /* ── Theme toggle do canto inferior ESQUERDO (como no original) ── * AuthLayout do LibreChat usa `absolute bottom-0 left-0 md:m-4` — em * telas < md fica grudado sem margem, e em mobile o wrapper raiz expande * além de 100vh, jogando o botão pra fora do viewport. * * Forçamos `position: fixed` pra sempre referenciar o viewport, e damos * margem consistente em qualquer tamanho. Mantemos a posição ESQUERDA. */ body.igepps-auth-page > #root > div.relative.flex.min-h-screen.flex-col > div.absolute { position: fixed !important; left: auto !important; right: auto !important; bottom: 24px !important; top: auto !important; margin: 0 !important; width: auto !important; height: auto !important; z-index: 100; } /* O ThemeSelector é só um