:root {
    --login-blue: #146ef5;
    --login-blue-dark: #0f4db8;
    --login-blue-soft: #eaf3ff;
    --login-ink: #172033;
    --login-muted: #5f6b7a;
    --login-border: #dce4ef;
    --login-bg: #f5f8fc;
    --login-success: #16855b;
    --login-danger: #b4232d;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.login-page {
    margin: 0;
    min-height: 100vh;
    background: var(--login-bg);
    color: var(--login-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}
button, input { font: inherit; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(440px, 1.1fr); }
.brand-side {
    position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
    overflow: hidden; padding: 56px clamp(28px, 6vw, 88px); color: #fff;
    background: linear-gradient(145deg, #0d3f90 0%, #146ef5 56%, #49a4ff 100%);
}
.brand-side::before, .brand-side::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.brand-side::before { width: 460px; height: 460px; right: -190px; top: -180px; background: rgba(255,255,255,.10); }
.brand-side::after { width: 330px; height: 330px; left: -150px; bottom: -140px; border: 1px solid rgba(255,255,255,.22); }
.brand-content { position: relative; z-index: 1; width: min(100%, 490px); text-align: center; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,.38); border-radius: 16px; background: rgba(255,255,255,.13); }
.brand-mark-dot { width: 19px; height: 19px; border: 5px solid #fff; border-radius: 50%; box-shadow: 0 0 0 7px rgba(255,255,255,.2); }
.brand-logo { display: block; max-width: min(100%, 380px); max-height: 150px; margin: 0 auto 28px; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(6, 36, 92, .22)); }
.brand-eyebrow, .section-kicker { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.brand-eyebrow { color: rgba(255,255,255,.78); }
.brand-side h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -.02em; }
.brand-side h2 { margin: 8px 0 20px; color: rgba(255,255,255,.85); font-size: 17px; font-weight: 600; }
.brand-description { max-width: 430px; margin: 0 auto; color: rgba(255,255,255,.82); font-size: 16px; }
.developer-credits { position: absolute; z-index: 1; bottom: 24px; margin: 0; color: rgba(255,255,255,.68); font-size: 12px; }
.login-side { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 6vw, 80px); background: #fff; }
.login-container { width: min(100%, 430px); }
.date-time { margin-bottom: 36px; color: var(--login-muted); font-size: 13px; font-weight: 700; text-align: right; }
.login-heading { margin-bottom: 28px; }
.section-kicker { color: var(--login-blue); }
.login-container h2 { margin: 0 0 8px; color: var(--login-ink); font-size: clamp(28px, 4vw, 36px); line-height: 1.1; letter-spacing: -.03em; }
.subtitle { margin: 0; color: var(--login-muted); font-size: 15px; }
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; margin: 0 0 22px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; }
.alert-danger { color: var(--login-danger); border-color: #f3c5ca; background: #fff1f2; }
.form-group { margin-bottom: 21px; }
.form-group label { display: block; margin-bottom: 7px; color: #263449; font-size: 14px; font-weight: 700; }
.form-group input { width: 100%; height: 50px; padding: 0 15px; color: var(--login-ink); border: 1px solid var(--login-border); border-radius: 10px; outline: none; background: #fbfdff; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.form-group input::placeholder { color: #8a98aa; }
.form-group input:focus { border-color: var(--login-blue); background: #fff; box-shadow: 0 0 0 4px rgba(20,110,245,.14); }
.pwd-wrapper { position: relative; }
.pwd-wrapper input { padding-right: 52px; }
.toggle-pwd-btn { position: absolute; top: 50%; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; transform: translateY(-50%); color: #65758a; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.toggle-pwd-btn:hover, .toggle-pwd-btn:focus-visible { color: var(--login-blue-dark); background: var(--login-blue-soft); }
.toggle-pwd-btn:focus-visible, .forgot-pass:focus-visible, .btn-entry:focus-visible { outline: 3px solid rgba(20,110,245,.30); outline-offset: 3px; }
.field-help { display: block; margin-top: 6px; color: #718096; font-size: 12px; }
.btn-entry { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 5px; padding: 0 20px; color: #fff; border: 0; border-radius: 10px; background: var(--login-blue); box-shadow: 0 8px 18px rgba(20,110,245,.22); cursor: pointer; font-size: 15px; font-weight: 800; transition: background .2s ease, box-shadow .2s ease, transform .2s ease; }
.btn-entry:hover { background: var(--login-blue-dark); box-shadow: 0 10px 22px rgba(15,77,184,.25); transform: translateY(-1px); }
.btn-entry:disabled { opacity: .75; cursor: wait; transform: none; }
.btn-loading { display: none; }
.btn-entry.is-loading .btn-label { display: none; }
.btn-entry.is-loading .btn-loading { display: inline-flex; gap: 8px; align-items: center; }
.forgot-pass { display: block; width: fit-content; margin: 20px auto 0; color: var(--login-blue-dark); font-size: 14px; font-weight: 700; text-decoration: none; }
.forgot-pass:hover { text-decoration: underline; }
.privacy-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 34px 0 0; color: #718096; font-size: 12px; text-align: center; }
.privacy-note i { color: var(--login-success); }
@media (max-width: 900px) { .login-shell { grid-template-columns: 1fr; } .brand-side { min-height: 330px; padding: 42px 24px 60px; } .brand-logo { max-height: 90px; margin-bottom: 18px; } .brand-side h1 { font-size: 30px; } .brand-description { font-size: 14px; } .developer-credits { bottom: 18px; } .login-side { min-height: 560px; padding: 42px 24px 56px; } .date-time { margin-bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media (forced-colors: active) { .btn-entry, .toggle-pwd-btn, .form-group input { border: 1px solid ButtonText; } }

/* Identidade System Ponto BritoTech: contraste da logo em fundo claro */
:root {
    --login-blue: #08a9ed;
    --login-blue-dark: #0679bd;
    --login-blue-soft: #e8f7ff;
    --login-ink: #071b4c;
    --login-muted: #52647f;
    --login-border: #cfe0ee;
    --login-bg: #f3f9fd;
}
.brand-side { color: #071b4c; background: linear-gradient(145deg, #f9fdff 0%, #e8f7ff 58%, #d9f2ff 100%); border-right: 1px solid #cfe5f3; }
.brand-side::before { background: rgba(8,169,237,.10); }
.brand-side::after { border-color: rgba(7,27,76,.12); }
.brand-eyebrow { color: #0679bd; }
.brand-side h1 { color: #071b4c; }
.brand-side h2, .brand-description { color: #52647f; }
.developer-credits { color: #52647f; }
.brand-mark { border-color: rgba(8,169,237,.34); background: rgba(255,255,255,.72); }
.brand-mark-dot { border-color: #08a9ed; box-shadow: 0 0 0 7px rgba(8,169,237,.14); }
/* Viewport responsivo do login — ocupa a tela sem barra lateral externa */
html.login-document,
html:has(body.login-page),
body.login-page {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}
body.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--login-bg, #f3f9fd);
}
.login-page .login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.login-page .brand-side,
.login-page .login-side {
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.login-page .brand-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vh, 52px) clamp(18px, 4vw, 64px);
}
.login-page .brand-content,
.login-page .login-container {
  width: min(100%, 430px);
  max-height: 100%;
  box-sizing: border-box;
}
.login-page .brand-logo {
  max-width: min(100%, 380px);
  max-height: 25vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.login-page .login-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vh, 56px) clamp(18px, 5vw, 72px);
}
.login-page .login-container {
  overflow: hidden;
}
.login-page .login-heading { margin-bottom: clamp(16px, 2.8vh, 28px); }
.login-page .form-group { margin-bottom: clamp(12px, 2.2vh, 21px); }
.login-page .privacy-note { margin-top: clamp(14px, 3vh, 34px); }
.login-page .developer-credits { bottom: clamp(10px, 2vh, 22px); }
@media (max-width: 900px) {
  body.login-page { overflow: hidden; }
  .login-page .login-shell {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 35dvh) minmax(0, 65dvh);
    height: 100dvh;
    overflow: hidden;
  }
  .login-page .brand-side {
    min-height: 0;
    height: auto;
    padding: 18px 20px 28px;
    overflow: hidden;
  }
  .login-page .brand-logo {
    max-height: 84px;
    max-width: min(78vw, 320px);
    margin-bottom: 8px;
  }
  .login-page .brand-side h1 { font-size: clamp(22px, 6vw, 30px); margin: 5px 0; }
  .login-page .brand-side h2 { font-size: 13px; margin: 4px 0; }
  .login-page .brand-description { margin: 5px 0; font-size: 12px; }
  .login-page .developer-credits { bottom: 8px; font-size: 10px; }
  .login-page .login-side {
    min-height: 0;
    height: auto;
    align-items: flex-start;
    padding: 22px 20px 24px;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .login-page .login-side::-webkit-scrollbar { display: none; width: 0; }
  .login-page .login-container { width: min(100%, 430px); margin: auto; }
}
@media (max-width: 420px) {
  .login-page .login-shell { grid-template-rows: minmax(0, 30dvh) minmax(0, 70dvh); }
  .login-page .brand-side { padding: 12px 16px 22px; }
  .login-page .brand-logo { max-height: 60px; }
  .login-page .brand-side h1 { font-size: 21px; }
  .login-page .brand-side h2,
  .login-page .brand-description { display: none; }
  .login-page .login-side { padding: 16px 16px 20px; }
  .login-page .login-heading { margin-bottom: 14px; }
  .login-page .login-container h2 { font-size: 26px; }
  .login-page .form-group input { height: 46px; }
  .login-page .field-help { margin-top: 4px; font-size: 11px; }
  .login-page .forgot-pass { margin-top: 12px; }
  .login-page .privacy-note { margin-top: 14px; font-size: 11px; }
}
.login-page #cpf[aria-invalid="true"] {
  border-color: #c0393b !important;
  box-shadow: 0 0 0 4px rgba(192,57,59,.12) !important;
}
.login-page #cpfValidation {
  display: block;
  margin-top: 6px;
  color: #a52f39;
  font-size: 12px;
  font-weight: 700;
}
.login-page #cpfValidation[hidden] { display: none; }
.login-page #cpfHelp[hidden] { display: none; }

/* Ajuste mobile: cabeçalho limpo, sem sobreposição de textos */
@media (max-width: 900px) {
  .login-page .login-shell {
    grid-template-rows: minmax(0, 32dvh) minmax(0, 68dvh);
  }
  .login-page .brand-side {
    position: relative;
    padding: 14px 20px 18px;
  }
  .login-page .brand-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }
  .login-page .developer-credits {
    display: none !important;
  }
  .login-page .brand-side h2,
  .login-page .brand-description {
    display: none !important;
  }
  .login-page .brand-eyebrow {
    margin: 2px 0 3px;
    font-size: 11px;
    letter-spacing: .14em;
  }
  .login-page .brand-side h1 {
    margin: 2px 0 0;
    line-height: 1.08;
    text-align: center;
  }
  .login-page .brand-logo {
    margin-bottom: 2px;
  }
  .login-page .login-side {
    padding-top: 18px;
  }
}