/* ========================================================================== Login Wake OMS — novo visual (tema roxo) Aplica-se ao fluxo de autenticacao: Login, MFA, Redefinir Senha, Bloquear Conta e modal de Multiplas Contas. Carregado SEMPRE depois de Login.v5.css / login.css, sobrescrevendo apenas o necessario. As classes legadas usadas pelo JavaScript (.btnLogin, .btnLoginCarregando, .erroLogin) sao reestilizadas aqui para que a troca de classes feita pelo script continue produzindo o estado correto. ========================================================================== */ /* Reset de box-sizing escopado ao fluxo de login (o design original usava * { box-sizing: border-box }). Evita que padding/borda dos campos somem a largura e estourem o card. */ .login-page, .login-page *, .login-page *::before, .login-page *::after { box-sizing: border-box; } :root { --wk-accent: #cb05fa; /* roxo Wake OMS (cor de destaque) */ --wk-accent-soft: #fae6fe; /* roxo claro (estado de repouso do botao) */ --wk-ink: #212121; /* texto principal escuro */ --wk-ink-muted: #666; /* texto secundario */ --wk-card-radius: 4px; --wk-card-glow: 0 0 10px -3px rgba(203, 5, 250, 0.25), 0 0 20px 1px rgba(203, 5, 250, 0.20), 0 0 30px 2px rgba(203, 5, 250, 0.18); --wk-input-border: #d6d9dc; --wk-transition: .15s cubic-bezier(.4, 0, .2, 1); } /* -------------------------------------------------------------------------- Pagina / fundo (vale tanto para a

do Login quanto para o do _LoginLayout das telas irmas) -------------------------------------------------------------------------- */ .login-page { min-height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 16px; margin: 0; position: static; font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif; background-color: #1a1a1a; background-image: linear-gradient(310deg, #1a1a1a 31.9%, #29122f 99.94%); } .login-logo { width: 178px; height: auto; margin-bottom: 40px; } /* -------------------------------------------------------------------------- Card de login -------------------------------------------------------------------------- */ .login-card { width: 318px; max-width: 100%; background: #fff; border-radius: var(--wk-card-radius); padding: 24px; box-shadow: var(--wk-card-glow); } .login-title { margin: 0 0 26px; text-align: center; font-size: 24px; font-weight: 700; color: var(--wk-ink); letter-spacing: .15px; } /* -------------------------------------------------------------------------- Campos com floating label -------------------------------------------------------------------------- */ .wk-field { position: relative; } .wk-input { width: 100%; height: 56px; border: 1px solid var(--wk-input-border); border-radius: 4px; padding: 0 14px; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 16px; color: var(--wk-ink); background: #fff; outline: none; transition: border-color var(--wk-transition); } .wk-input:focus { border: 2px solid var(--wk-accent); padding: 0 13px; } .wk-label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #8a8b8d; font-family: 'Roboto', sans-serif; font-size: 16px; letter-spacing: .15px; pointer-events: none; background: #fff; padding: 0 4px; transition: top var(--wk-transition), font-size var(--wk-transition), color var(--wk-transition); } .wk-input:focus + .wk-label, .wk-input:not(:placeholder-shown) + .wk-label { top: 0; font-size: 12px; color: var(--wk-ink-muted); } .wk-input:focus + .wk-label { color: var(--wk-accent); } /* Botao de mostrar/ocultar senha (icone Font Awesome) */ .wk-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: #565656; border-radius: 50%; transition: background var(--wk-transition); } .wk-eye:hover { background: rgba(0, 0, 0, .05); } .wk-eye i { font-size: 18px; } .login-obrig { font-size: 12px; color: var(--wk-ink-muted); margin: 6px 2px 18px; } /* -------------------------------------------------------------------------- Botao ENTRAR (estilizado por ID para ser robusto a troca de classe feita pelo JS: .btnLogin <-> .btnLoginCarregando) -------------------------------------------------------------------------- */ #btnLogin { width: 100%; height: 48px; border: 0; border-radius: 8px; background: var(--wk-accent-soft); color: var(--wk-accent); font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 15px; letter-spacing: .46px; text-transform: uppercase; cursor: pointer; padding: 0; transition: background var(--wk-transition), color var(--wk-transition); } /* Roxo solido quando os dois campos estao preenchidos, ou em carregamento */ .wk-form:not(:has(.wk-input:placeholder-shown)) #btnLogin, #btnLogin.btnLoginCarregando { background: var(--wk-accent); color: #fff; } .wk-form:not(:has(.wk-input:placeholder-shown)) #btnLogin:hover { filter: brightness(.88); } #btnLogin:disabled { cursor: wait; opacity: .85; } /* Estado de erro nos campos (classe adicionada via JS) sobre input branco */ .wk-input.erroLogin { border: 2px solid #d32f2f !important; } /* -------------------------------------------------------------------------- Links (Recuperar Senha / Primeiro Acesso) — sobrescreve o azul-marinho legado (#193553 !important) das folhas antigas -------------------------------------------------------------------------- */ .login-links { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; } .wk-link, #esqueciSenha, #primeiroAcesso { color: #1f1f1f !important; text-decoration: underline; text-underline-offset: 2px; font-family: 'Roboto', sans-serif; font-size: 14px !important; font-weight: 400; cursor: pointer; transition: color var(--wk-transition); } .wk-link:hover, #esqueciSenha:hover, #primeiroAcesso:hover, #esqueciSenha:link, #esqueciSenha:visited, #esqueciSenha:active, #primeiroAcesso:link, #primeiroAcesso:visited, #primeiroAcesso:active { color: var(--wk-accent) !important; } /* -------------------------------------------------------------------------- Ecossistema -------------------------------------------------------------------------- */ .login-eco { margin-top: 40px; text-align: center; } .login-eco-label { color: #cdc1d8; font-size: 14px; margin-bottom: 16px; } .login-eco-logos { display: flex; align-items: center; justify-content: center; gap: 42px; } .login-eco-logos a { display: flex; align-items: center; transition: opacity var(--wk-transition); } .login-eco-logos a:hover { opacity: .8; } .login-eco-logos img { height: 30px; width: auto; } /* -------------------------------------------------------------------------- Rodape de suporte -------------------------------------------------------------------------- */ .login-footer { margin-top: 42px; text-align: center; color: #b6aac4; font-size: 13px; line-height: 1.7; } .wk-foot-link { color: #ddd2e6; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; transition: color var(--wk-transition); } .wk-foot-link:hover { color: #fff; } .wk-foot-tel { color: #fff; } /* Garante ocultar o recaptcha enquanto nao for necessario */ .hidden { display: none !important; } /* -------------------------------------------------------------------------- Modal de Multiplas Contas (injetado no #modal da tela de login) -------------------------------------------------------------------------- */ #modal .modal-content { border: none; border-radius: var(--wk-card-radius); box-shadow: 0 12px 40px rgba(0, 0, 0, .45); } #modal .modal-title { color: var(--wk-ink); font-weight: 500; } #modal .modal-footer .auth-btn { min-width: 110px; } /* ========================================================================== Telas irmas (MFA, Redefinir Senha, Bloquear Conta) — card branco generico reutilizavel sobre o mesmo fundo. Escopo restrito a .login-page para nao vazar para o resto do app. ========================================================================== */ .auth-card { width: 420px; max-width: 100%; background: #fff; border-radius: var(--wk-card-radius); padding: 24px; box-shadow: var(--wk-card-glow); text-align: center; } .auth-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--wk-ink); } .auth-subtitle { margin: 0 0 20px; font-size: 14px; color: var(--wk-ink-muted); line-height: 1.5; } /* Botoes genericos do fluxo de autenticacao */ .auth-btn { height: 44px; min-width: 130px; border-radius: 8px; border: 0; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: .3px; text-transform: uppercase; cursor: pointer; transition: background var(--wk-transition), color var(--wk-transition), filter var(--wk-transition); } .auth-btn--primary { background: var(--wk-accent); color: #fff; } .auth-btn--primary:hover { filter: brightness(.9); } .auth-btn--primary:disabled { background: var(--wk-accent-soft); color: var(--wk-accent); cursor: not-allowed; } .auth-btn--ghost { background: #fff; color: var(--wk-accent); border: 1px solid var(--wk-accent); } .auth-btn--ghost:hover { background: var(--wk-accent-soft); } .auth-btn--text { background: none; border: none; color: var(--wk-accent); font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.46px; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background var(--wk-transition); display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; text-decoration: none; } .auth-btn--text:hover { background: var(--wk-accent-soft); } /* Variante escura do botao texto (ex.: LIMPAR no MFA) */ .auth-btn--text-dark { color: var(--wk-ink); } .auth-btn--text-dark:hover { background: rgba(0, 0, 0, .05); } .auth-btn--block { width: 100%; } /* -------------------------------------------------------------------------- MFA — campos de 6 digitos -------------------------------------------------------------------------- */ .login-page .mfa-input { width: 48px !important; height: 56px; border: 1px solid var(--wk-input-border); border-radius: 8px; background: #fff; color: var(--wk-ink); font-size: 22px; font-weight: 500; text-align: center; } .login-page .mfa-input:focus { border: 2px solid var(--wk-accent); box-shadow: none; outline: none; } /* -------------------------------------------------------------------------- Inputs Bootstrap (.form-control) dentro do fluxo de auth (Redefinir Senha) -------------------------------------------------------------------------- */ .login-page .form-control:focus { border-color: var(--wk-accent); box-shadow: 0 0 0 .15rem rgba(203, 5, 250, .18); } /* -------------------------------------------------------------------------- Toast notifications (WakeMUI) -------------------------------------------------------------------------- */ .wakemui-toast-container { position: fixed; top: 24px; right: 24px; z-index: 999999; display: flex; flex-direction: column; gap: 12px; max-width: 400px; pointer-events: none; } .wakemui-toast { display: flex; align-items: flex-start; padding: 6px 16px; border-radius: 4px; box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12); pointer-events: auto; opacity: 0; transform: translateX(100%); transition: opacity 0.3s ease, transform 0.3s ease; } .wakemui-toast.show { opacity: 1; transform: translateX(0); } .wakemui-toast.hide { opacity: 0; transform: translateX(100%); } .wakemui-toast.success { background-color: #29a329; } .wakemui-toast.error { background-color: #d92626; } .wakemui-toast.warning { background-color: #e89530; } .wakemui-toast.info { background-color: #18a0fb; } .wakemui-toast-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 12px; margin-top: 10px; flex-shrink: 0; color: #fff; font-size: 22px; } .wakemui-toast-content { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; padding: 8px 0; } .wakemui-toast-message { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0.15px; color: #ffffff; margin: 0; word-wrap: break-word; } .wakemui-toast-close { display: flex; align-items: center; padding: 0; padding-left: 16px; margin-top: 10px; flex-shrink: 0; background: none; border: none; cursor: pointer; color: #fff; opacity: 0.9; transition: opacity 0.15s ease; } .wakemui-toast-close:hover { opacity: 1; } .wakemui-toast-close .material-icons { font-size: 20px; } @media (max-width: 576px) { .wakemui-toast-container { top: 16px; right: 16px; left: 16px; max-width: none; } .wakemui-toast { transform: translateY(-100%); } .wakemui-toast.show { transform: translateY(0); } .wakemui-toast.hide { transform: translateY(-100%); } } /* -------------------------------------------------------------------------- Caixas de alerta do fluxo auth (Conta Bloqueada, Link Invalido) -------------------------------------------------------------------------- */ .auth-alert { display: flex; align-items: flex-start; gap: 12px; border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; text-align: left; } .auth-alert-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; } .auth-alert-title { font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 600; margin: 0 0 6px; } .auth-alert-text, .auth-alert-list li { font-family: 'Roboto', sans-serif; font-size: 13px; line-height: 1.5; color: #555; margin: 0; } .auth-alert-list { margin: 0; padding-left: 18px; } .auth-alert--info { background-color: #e7f3fb; } .auth-alert--info .auth-alert-icon, .auth-alert--info .auth-alert-title { color: #1976d2; } .auth-alert--info .auth-alert-list li { color: #1976d2; } .auth-alert--error { background-color: #fdeded; } .auth-alert--error .auth-alert-icon, .auth-alert--error .auth-alert-title { color: #d32f2f; } /* -------------------------------------------------------------------------- Campos do fluxo de redefinicao de senha -------------------------------------------------------------------------- */ /* Floating label fixo (select nao tem :placeholder-shown) */ .wk-label--float { top: 0; font-size: 12px; color: var(--wk-ink-muted); } /* Select de conta unica (somente leitura) */ select.wk-input.conta-somente-leitura { color: #8a8b8d; cursor: not-allowed; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; } /* Lista de requisitos pendentes de senha (renderizada por politica-senha-cliente.js) */ .password-requirements { font-size: 0.85em; margin-top: 8px; text-align: left; } .password-requirements .requirement { margin: 2px 0; } .password-requirements .requirement.invalid { color: #d32f2f; } /* Spinner de carregamento autocontido */ .auth-spinner { display: inline-block; width: 2rem; height: 2rem; border: 3px solid var(--wk-accent); border-right-color: transparent; border-radius: 50%; animation: wk-spin .75s linear infinite; } @keyframes wk-spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- Dialog WakeMUI (replica do padrao wakemui-dialog do app para o login) -------------------------------------------------------------------------- */ .wakemui-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 99999; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .wakemui-modal-overlay.open { opacity: 1; visibility: visible; } .wakemui-dialog { background-color: #ffffff; border-radius: 4px; box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12); min-width: 400px; max-width: 560px; width: 100%; display: flex; flex-direction: column; overflow: hidden; transform: scale(0.9); transition: transform 0.2s ease; } .wakemui-modal-overlay.open .wakemui-dialog { transform: scale(1); } .wakemui-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 24px; } .wakemui-dialog-title { font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 500; line-height: 1.6; letter-spacing: 0.15px; color: #17191c; margin: 0; flex: 1; } .wakemui-dialog-close { background: transparent; border: none; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 48px; transition: background-color 0.15s ease; color: #8a939c; } .wakemui-dialog-close:hover { background-color: rgba(0, 0, 0, 0.04); } .wakemui-dialog-close .material-icons { font-size: 20px; } .wakemui-dialog-content { display: flex; flex-direction: column; gap: 16px; padding: 8px 24px; } .wakemui-dialog-text { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0.15px; color: #17191c; margin: 0; padding: 0 2px; } .wakemui-dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px; } .wakemui-dialog-btn-text { background: transparent; border: none; border-radius: 4px; padding: 6px 8px; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.75; letter-spacing: 0.4px; text-transform: uppercase; color: #18a0fb; cursor: pointer; transition: background-color 0.15s ease; } .wakemui-dialog-btn-text:hover { background-color: rgba(24, 160, 251, 0.04); } .wakemui-dialog-btn-contained { background-color: #18a0fb; border: none; border-radius: 4px; padding: 6px 16px; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.75; letter-spacing: 0.4px; text-transform: uppercase; color: #ffffff; cursor: pointer; transition: background-color 0.15s ease; } .wakemui-dialog-btn-contained:hover { background-color: #1590e0; } @media (max-width: 576px) { .wakemui-dialog { min-width: auto; max-width: calc(100% - 32px); margin: 16px; } } /* -------------------------------------------------------------------------- Responsivo -------------------------------------------------------------------------- */ @media (max-width: 480px) { .login-card, .auth-card { width: 100%; } .login-eco-logos { gap: 28px; } .login-page .mfa-input { width: 40px !important; height: 48px; font-size: 18px; } }