.tela-login { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: 24px; background: var(--bg-externo); }
.tela-login header, .tela-login footer, .login-layout { width: min(1180px, 100%); margin: 0 auto; background: var(--bg-card); }
.tela-login header { border-radius: 26px 26px 0 0; border: 1px solid var(--borda); border-bottom: 0; }
.cabecalho-container.cabecalho-login { display: flex; align-items: center; justify-content: space-between; padding: 24px 30px; }
.logotipo { display: inline-flex; align-items: center; gap: 10px; color: var(--texto-principal); text-decoration: none; }
.logotipo-icone { width: 31px; height: 31px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: transparent; background: var(--primaria); font-size: 0; }
.logotipo-icone::after { content: 'P'; color: #fff; font: 800 15px var(--fonte-titulo); }
.logotipo-texto { font: 800 18px var(--fonte-titulo); letter-spacing: -.04em; }
.menu-navegacao { display: flex; }
.login-layout { position: relative; display: grid; place-items: center; padding: 55px 30px 75px; border-inline: 1px solid var(--borda); background: radial-gradient(circle at 76% 15%, rgba(33, 184, 176, .12), transparent 25%), var(--bg-principal); }
.login-layout::before { content: ''; position: absolute; width: 240px; height: 240px; left: 6%; bottom: 8%; border: 1px solid rgba(33, 184, 176, .16); border-radius: 50%; box-shadow: 0 0 0 36px rgba(33, 184, 176, .04), 0 0 0 75px rgba(33, 184, 176, .025); }
.login-container { position: relative; z-index: 1; width: min(420px, 100%); display: flex; flex-direction: column; gap: 20px; padding: 33px; border: 1px solid var(--borda); border-radius: 22px; background: var(--bg-card); box-shadow: 0 24px 55px rgba(26, 29, 35, .1); }
.login-cabecalho { text-align: center; }
.login-cabecalho::before { content: 'Bem-vindo'; display: inline-flex; margin-bottom: 13px; padding: 5px 10px; border-radius: 999px; color: var(--primaria-hover); background: var(--primaria-suave); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.login-cabecalho h1 { margin: 0; font: 800 26px/1.2 var(--fonte-titulo); letter-spacing: -.04em; }
.login-cabecalho p { margin: 7px 0 0; color: var(--texto-secundario); font-size: 12px; }
.alerta-erro { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid rgba(221, 91, 108, .2); border-radius: 10px; color: var(--cor-pos); background: var(--cor-pos-suave); font-size: 11px; font-weight: 700; }
.login-formulario { display: flex; flex-direction: column; gap: 16px; }
.login-formulario .grupo-campo { display: flex; flex-direction: column; gap: 6px; }
.login-formulario label { color: var(--texto-secundario); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.login-formulario input { width: 100%; min-height: 46px; padding: 10px 13px; border-radius: 11px; color: var(--texto-principal); background: var(--bg-principal); font-size: 13px; }
.login-formulario input::placeholder { color: var(--texto-mutado); }
.btn-entrar { width: 100%; min-height: 46px; margin-top: 4px; }
.ajuda-credenciais { margin-top: 0 !important; padding: 13px !important; border-radius: 11px; background: var(--primaria-suave); font-size: 11px !important; }
.tela-login footer { padding: 18px 30px; border: 1px solid var(--borda); border-top: 0; border-radius: 0 0 26px 26px; color: var(--texto-mutado); background: var(--bg-card); text-align: center; font-size: 10px; }
.tela-login footer p { margin: 0; }

@media (max-width: 640px) {
  .tela-login { padding: 0; }
  .tela-login header, .tela-login footer { border-radius: 0; }
  .cabecalho-container.cabecalho-login { padding: 18px; }
  .login-layout { padding: 35px 16px 55px; }
  .login-container { padding: 26px 21px; }
  #alternar-tema #texto-botao-tema { display: none; }
}