/* Login — painel da marca com as trilhas de circuito do logo + formulário */
body { min-height: 100vh; }
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr);
}
.login-marca {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px clamp(32px, 6vw, 88px);
  background: #0f2f45;
  background: linear-gradient(160deg, #164f7e 0%, #10384f 55%, #0c2a36 100%);
  color: #e8f3f6;
}
.trilhas { position: absolute; inset: 0; width: 100%; height: 100%; }
.trilhas .t { stroke: rgba(126, 210, 214, .55); stroke-width: 3; stroke-dasharray: 900; stroke-dashoffset: 900; animation: tracar 2.4s ease-out forwards; }
.trilhas .t2 { stroke: rgba(90, 160, 230, .5); animation-delay: .25s; }
.trilhas .t3 { animation-delay: .5s; }
.trilhas .t4 { stroke: rgba(90, 160, 230, .45); animation-delay: .7s; }
.trilhas .t5 { animation-delay: .9s; }
.trilhas .nos circle { fill: #10384f; stroke: #7ed2d6; stroke-width: 3; opacity: 0; animation: acender .4s ease-out 2s forwards; }
@keyframes tracar { to { stroke-dashoffset: 0; } }
@keyframes acender { to { opacity: 1; } }

.login-marca-texto { position: relative; max-width: 30rem; }
.login-marca-texto img { display: block; margin-bottom: 28px; }
.login-marca-texto h1 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.login-marca-texto p { margin-top: 16px; font-size: 1.05rem; line-height: 1.6; color: #c4dfe6; max-width: 34ch; }
.login-rodape { position: absolute; left: clamp(32px, 6vw, 88px); bottom: 28px; margin: 0; color: #8fb6c2; font-size: 13px; }

.login-form { display: grid; place-items: center; padding: 32px 20px; background: var(--bg); }
.cartao {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 16px;
}
.cartao .logo { width: 200px; height: auto; margin-bottom: 8px; }
:root[data-theme="escuro"] .cartao .logo { filter: brightness(0) invert(1) opacity(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="claro"]) .cartao .logo { filter: brightness(0) invert(1) opacity(.9); } }
.cartao h2 { font-size: 1.6rem; }
.cartao > p.muted { margin: -10px 0 4px; }
.cartao .campo input { height: 44px; font-size: 15px; }
.senha-wrap { position: relative; }
.senha-wrap input { padding-right: 44px; }
.senha-wrap .btn-icone { position: absolute; right: 4px; top: 4px; }

.bancos { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.bancos legend { font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.bancos label { flex: 1 1 120px; cursor: pointer; }
.bancos input { position: absolute; opacity: 0; }
.bancos span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r-s);
  background: var(--surface); font-weight: 500;
}
.bancos input:checked + span { border-color: var(--teal); background: var(--teal-50); color: var(--teal-600); box-shadow: inset 0 0 0 1px var(--teal); }
.bancos label.teste input:checked + span { border-color: var(--warn); background: var(--warn-50); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.bancos input:focus-visible + span { box-shadow: var(--focus); }

.btn.grande { height: 46px; font-size: 15px; margin-top: 4px; }

@media (max-width: 860px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-marca { min-height: 220px; padding: 32px 24px 56px; }
  .login-marca-texto img { width: 52px; height: auto; margin-bottom: 14px; }
  .login-marca-texto p { display: none; }
  .login-rodape { left: 24px; bottom: 16px; }
  .cartao .logo { display: none; }
}

/* ---- solicitação de acesso e seletor de empresa/ambiente (multiempresa) ---- */
.login-solicitar { margin: 4px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }
button.link { background: none; border: 0; padding: 0; color: var(--teal-600); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
button.link:focus-visible { box-shadow: var(--focus); border-radius: 3px; }
button.link.pulsar { animation: pulsar 1.2s ease-in-out 3; }
@keyframes pulsar { 50% { color: var(--warn); } }

.escolha-lista { display: flex; flex-direction: column; gap: 12px; }
.escolha-empresa { border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 14px; background: var(--surface); }
.escolha-nome { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.escolha-ambientes { display: flex; gap: 8px; flex-wrap: wrap; }
.escolha-ambientes .btn { flex: 1 1 130px; height: 42px; }
.escolha-ambientes .btn.teste { border-color: var(--warn); color: var(--warn); background: var(--warn-50); }
.form-solicitar .grade-campos { margin-top: 12px; }
.form-solicitar textarea { width: 100%; resize: vertical; }