/* Tela de entrada: mesmo desenho do LoginVisual.html dos sistemas atuais (09/10/2026), tema "financeiro". Sem símbolos institucionais. */
body { margin: 0; }
#telaLogin {
  --l-fonte: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --l-papel: #ffffff; --l-tinta: #15191c; --l-tinta-2: #59626a; --l-linha: #d9dee2; --l-erro: #b3261e;
  --l-campo: #e3ece6; --l-acento: #1f6f5b; --l-trama: rgba(31, 111, 91, .13);
  font-family: var(--l-fonte); color: var(--l-tinta); background: var(--l-papel);
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
}
#telaLogin .login-lado { position: relative; overflow: hidden; background: var(--l-campo); display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 5vw, 64px); min-height: 100vh; box-sizing: border-box; }
#telaLogin .login-lado::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 33px, var(--l-trama) 33px 34px);
  -webkit-mask-image: linear-gradient(160deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 85%); mask-image: linear-gradient(160deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 85%); }
#telaLogin .login-nome { position: relative; font: 800 clamp(48px, 6.6vw, 104px)/.92 var(--l-fonte); letter-spacing: -.035em; color: var(--l-acento);
  margin: 0; text-wrap: balance; animation: login-sobe .5s ease-out both; }
#telaLogin .login-desc { position: relative; margin: 18px 0 0; max-width: 34ch; font-size: 17px; line-height: 1.5; color: var(--l-tinta-2); }
@keyframes login-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #telaLogin .login-nome { animation: none; } }

#telaLogin .login-cartao { grid-column: 2; grid-row: 1; align-self: center; justify-self: center; width: 100%; max-width: 380px; box-sizing: border-box;
  padding: 40px 24px; display: flex; flex-direction: column; gap: 16px; text-align: left; }
#telaLogin .login-cartao form { display: flex; flex-direction: column; gap: 16px; }
#telaLogin .login-cartao h1 { font: 700 30px/1.15 var(--l-fonte); letter-spacing: -.02em; color: var(--l-tinta); margin: 0; }
#telaLogin .login-cartao h1 + p { color: var(--l-tinta-2); font-size: 15px; line-height: 1.5; margin: -6px 0 6px; }
#telaLogin .login-cartao label { display: flex; flex-direction: column; gap: 6px; font: 500 14px/1.3 var(--l-fonte); color: var(--l-tinta); }
#telaLogin .login-cartao input { font: 400 16px/1.2 var(--l-fonte); color: var(--l-tinta); height: 48px; padding: 0 14px;
  background: #fff; border: 1px solid var(--l-linha); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
#telaLogin .login-cartao input::placeholder { color: #9aa3aa; }
#telaLogin .login-cartao input:focus { outline: none; border-color: var(--l-acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--l-acento) 16%, transparent); }
#telaLogin .btn.primario { height: 50px; border-radius: 10px; border: 0; background: var(--l-acento); color: #fff; font: 600 16px var(--l-fonte); margin-top: 4px; cursor: pointer; }
#telaLogin .btn.primario:hover { filter: brightness(1.08); }
#telaLogin .btn.primario:focus-visible { outline: 3px solid color-mix(in srgb, var(--l-acento) 45%, transparent); outline-offset: 3px; }
#telaLogin .suave.pequeno { font-size: 13px; line-height: 1.5; color: var(--l-tinta-2); margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--l-linha); }
#telaLogin .erro-msg, #telaLogin .errorlist { color: var(--l-erro); font-size: 14px; margin: 0; padding: 0; list-style: none; }
#telaLogin .login-qr { width: 200px; height: 200px; align-self: center; }
#telaLogin .login-qr svg { width: 100%; height: 100%; }

@media (max-width: 860px) {
  #telaLogin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  #telaLogin .login-lado { min-height: 0; padding: 28px 20px 24px; }
  #telaLogin .login-nome { font-size: clamp(38px, 11vw, 56px); }
  #telaLogin .login-desc { font-size: 15px; margin-top: 10px; }
  #telaLogin .login-cartao { grid-column: 1; grid-row: 2; align-self: start; padding: 28px 20px 40px; }
}