/*
 * Tema VGiroo da pagina de login do inPaaS. Carregado por LoginBrandFilter (gateway), sobre o login-v2.css da plataforma.
 * Cores e fontes sao as do app: marfim, indigo, verde-petroleo; Fredoka nos titulos e Manrope no texto.
 */
html.login-page {
  --vg-marfim: #FBF7F1; --vg-indigo: #2E2B63; --vg-tinta: #1E1B2E; --vg-grafite: #56526B; --vg-nevoa: #8E89A3;
  --vg-borda: #E8E1D6; --vg-teal: #087186; --vg-teal2: #0B8E7E; --vg-verm: #C13C47; --vg-verm-bg: #FAE7E8;
  --vg-grad: linear-gradient(120deg, #0A6B7E 0%, #0B8E7E 100%);
  overflow: auto !important;
}
html.login-page body, html.login-page body input, html.login-page body button {
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 15px; color: var(--vg-grafite);
}
html.login-page body { background: var(--vg-marfim); min-height: 100vh; padding-bottom: 80px; }

/* fundo: marfim com duas luzes suaves (verde-petroleo e indigo) */
html.login-page .login__overlay {
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(11, 142, 126, .16), transparent 62%),
    radial-gradient(800px 480px at -8% 108%, rgba(46, 43, 99, .11), transparent 58%),
    var(--vg-marfim) !important;
  opacity: 1 !important;
}

/* cartao */
html.login-page .site__container { padding: 7vh 0 2rem; }
html.login-page .grid__container {
  max-width: 26rem; width: 92%;
  background: #fff; border: 1px solid var(--vg-borda); border-radius: 22px;
  padding: 34px 30px 26px; box-shadow: 0 22px 60px rgba(46, 43, 99, .11), 0 2px 6px rgba(46, 43, 99, .05);
}
html.login-page .site__brand { text-align: center; padding: 0 0 22px; }
html.login-page .vg-brand img { height: 52px; width: auto; max-width: 100%; }
html.login-page .vg-brand p { margin: 12px 0 0; color: var(--vg-grafite); font-size: 14px; line-height: 1.4; }

/* campos */
html.login-page .form__login { color: var(--vg-grafite); }
html.login-page .form__login .form__field.shadowed {
  box-shadow: none; border: 1.5px solid var(--vg-borda); border-radius: 12px; overflow: hidden; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
html.login-page .form__login .form__field.shadowed:focus-within {
  border-color: var(--vg-teal2); box-shadow: 0 0 0 3px rgba(11, 142, 126, .16);
}
html.login-page .form__login .form__field.shadowed > label {
  background: #F6F1E8; color: var(--vg-teal); border-radius: 0; padding: 1rem 1.1rem;
}
html.login-page .form__login input[type="text"], html.login-page .form__login input[type="password"] {
  background: #fff; color: var(--vg-tinta); border-radius: 0; padding: 1rem;
}
html.login-page .form__login input[type="text"]:focus, html.login-page .form__login input[type="password"]:focus { background: #fff; }
html.login-page .form__login input::placeholder { color: var(--vg-nevoa); opacity: 1; }
html.login-page .form__login input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: var(--vg-tinta); }

/* olhinho da senha */
html.login-page .form__login .form__field.shadowed { position: relative; }
html.login-page .form__login .form__field.shadowed:has(.vg-olho) input { padding-right: 52px; }
html.login-page .vg-olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center; background: transparent !important; border: 0 !important;
  box-shadow: none !important; color: var(--vg-nevoa); border-radius: 10px; cursor: pointer; text-transform: none; letter-spacing: 0;
}
html.login-page .vg-olho:hover { color: var(--vg-teal); background: rgba(11, 142, 126, .08) !important; }
html.login-page .vg-olho:focus-visible { outline: 2px solid var(--vg-teal2); outline-offset: 1px; }

/* botao */
html.login-page .form__login button:not(.sso):not(.vg-olho):not(.vg-olho) {
  background: var(--vg-grad); border: 0; color: #fff; border-radius: 12px; padding: 1rem;
  font-weight: 800; letter-spacing: .06em; font-size: 13px; text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(8, 113, 134, .22); transition: transform .12s, box-shadow .12s, filter .12s;
}
html.login-page .form__login button:not(.sso):not(.vg-olho):hover { filter: brightness(1.05); box-shadow: 0 10px 24px rgba(8, 113, 134, .28); }
html.login-page .form__login button:not(.sso):not(.vg-olho):active { transform: translateY(1px); filter: brightness(.97); }
html.login-page .form__login button:not(.sso):not(.vg-olho):disabled { background: #E8E1D6; color: var(--vg-nevoa); box-shadow: none; border: 0; }
html.login-page .form__login button.sso { border: 1.5px solid var(--vg-borda); background: #fff; color: var(--vg-indigo); border-radius: 12px; }

/* mensagens (erro, sessao expirada, regras de senha) */
html.login-page .form__field.message {
  background: var(--vg-verm-bg); color: var(--vg-verm); border-radius: 12px; padding: 12px 14px; font-weight: 600; line-height: 1.45;
}
html.login-page .form__field.message.vg-aviso { background: #ECEAF6; color: var(--vg-indigo); font-weight: 500; }
html.login-page .form__field.message ul { margin: 8px 0 0; padding-left: 18px; font-weight: 500; }

/* lembrar-me (caixa de selecao) e esqueci a senha */
html.login-page .form__field:has(> .checkbox) { display: flex; align-items: center; gap: 10px; margin: 2px 0; }
html.login-page .checkbox { width: 22px; height: 22px; margin: 0; flex: none; }
html.login-page .checkbox > label {
  width: 22px; height: 22px; padding: 0; top: 0; left: 0;
  background: #fff; border: 1.5px solid var(--vg-borda); box-shadow: none; border-radius: 6px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
html.login-page .checkbox > label:hover { border-color: var(--vg-teal2); }
html.login-page .checkbox > label:after {
  width: 11px; height: 6px; top: 4.5px; left: 3.5px; border: 2.5px solid #fff; border-top: none; border-right: none;
}
html.login-page .checkbox input[type=checkbox]:checked + label { background: var(--vg-teal2); border-color: var(--vg-teal2); }
html.login-page .checkbox input[type=checkbox]:focus-visible + label { box-shadow: 0 0 0 3px rgba(11, 142, 126, .25); }
html.login-page .checkbox + label, html.login-page .form__login .checkbox + label {
  color: var(--vg-grafite); background: transparent; padding: 0; margin: 0; cursor: pointer; font-size: 14.5px;
}
html.login-page a { color: var(--vg-teal); font-weight: 600; }
html.login-page a:hover { color: var(--vg-teal2); }

/* titulo por etapa e links de apoio (login-vgiroo.js) */
html.login-page .vg-titulo { margin: 0 0 14px; }
html.login-page .vg-titulo h2 { margin: 0; font: 600 24px/1.2 Fredoka, Manrope, sans-serif; color: var(--vg-indigo); }
html.login-page .vg-titulo p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--vg-grafite); }
html.login-page .vg-apoio { margin-top: 18px; text-align: center; font-size: 14px; }
html.login-page .form__field.message.vg-ok { background: #E6F4EE; color: #0A5F4E; }
html.login-page .form__field.message.vg-regras > span { display: none; }
html.login-page .form__field.message.vg-regras ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
html.login-page .form__field.message.vg-regras ul:before { content: "Regras da senha:"; display: block; margin: 0 0 4px -18px; font-weight: 700; }
html.login-page .form__login .form__field { margin-top: 12px; }
html.login-page .link-forgot { text-align: center; margin-top: 16px !important; font-size: 14px; }

/* rodape */
html.login-page .footer {
  position: static; width: auto; max-width: 30rem; margin: 18px auto 0; background: transparent; box-shadow: none;
  color: var(--vg-nevoa); font-size: 12.5px; line-height: 1.5; text-align: center;
}
html.login-page .footer a { color: var(--vg-grafite); }

@media (max-width: 480px) {
  html.login-page .site__container { padding-top: 4vh; }
  html.login-page .grid__container { padding: 26px 20px 20px; border-radius: 18px; }
}

/* Entrar com Google (so aparece com o login com Google ligado no servidor) */
html.login-page .vg-google { margin-top: 18px; }
html.login-page .vg-ou { display: flex; align-items: center; gap: 12px; color: var(--vg-nevoa); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
html.login-page .vg-ou::before, html.login-page .vg-ou::after { content: ""; flex: 1; border-top: 1px solid var(--vg-borda); }
html.login-page .vg-google-btn { display: flex; justify-content: center; margin-top: 14px; min-height: 44px; }
html.login-page .vg-google-msg { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--vg-verm-bg); border: 1.5px solid #F3C9CD; color: var(--vg-verm); font-size: 14px; line-height: 1.45; }

/* regras da senha ao vivo: marca o que ja foi cumprido enquanto a pessoa digita */
html.login-page .form__field.message.vg-regras ul { list-style: none; padding-left: 0; }
html.login-page .form__field.message.vg-regras ul:before { margin-left: 0; }
html.login-page .form__field.message.vg-regras li { position: relative; padding-left: 24px; margin: 3px 0; }
html.login-page .form__field.message.vg-regras li:before {
  content: "\2022"; position: absolute; left: 6px; top: 0; font-weight: 700;
}
html.login-page .form__field.message.vg-regras li.vg-pendente:before { content: "\25CB"; left: 3px; }
html.login-page .form__field.message.vg-regras li.vg-cumprida { color: #1b7a4b; }
html.login-page .form__field.message.vg-regras li.vg-cumprida:before { content: "\2713"; left: 3px; }
/* senha recusada: a mensagem do servidor aparece acima das regras */
html.login-page .form__field.message.vg-regras.vg-falha > span { display: block; font-weight: 700; margin: 0 0 8px; }