/* =========================================================================
UPLACES ADMIN — TELA DE LOGIN
-------------------------------------------------------------------------
Split screen: painel de marca (esquerda) + card de formulario (direita).
Base: Bootstrap 4.3 (o login carrega BS4, diferente do resto do admin que
usa BS3). Carregar depois do bootstrap.
Reverter: remover o deste arquivo no login_split_screen.jsp.
========================================================================= */
:root {
--up-orange: #FD6D22;
--up-orange-600: #E85D18;
--up-orange-050: #FFF3ED;
--up-purple: #7464D1;
--up-purple-600: #6150B9;
--up-ink: #1E293B;
--up-ink-700: #334155;
--up-ink-500: #64748B;
--up-ink-300: #CBD5E1;
--up-ink-200: #E2E8F0;
--up-ink-100: #F1F5F9;
--up-radius: 10px;
--up-radius-xl: 16px;
/* mesma fonte do admin (ver up-theme.css): Inter, desenhada para
interface — mais legivel em texto pequeno e em tabela densa */
--up-font: "Inter", "Helvetica Neue", Roboto, Arial, sans-serif;
}
/* Gradiente unico atravessando a tela inteira. Antes o painel esquerdo tinha
gradiente proprio e a coluna do formulario era branca — na divisa aparecia
uma linha vertical nitida, denunciando "duas telas coladas". */
body {
background: linear-gradient(135deg, #FFF7F2 0%, #FFFFFF 42%, #FAF8FE 72%, #F5F2FE 100%);
background-attachment: fixed;
font-family: var(--up-font);
color: var(--up-ink-700);
-webkit-font-smoothing: antialiased;
}
/* O .hero-info era o texto sobreposto a antiga imagem de fundo. O painel de
marca da esquerda cumpre esse papel agora — sem ele, o bloco vazava para
baixo do fold. */
.hero-info {
display: none !important;
}
/* garante que as duas colunas ocupem a altura da janela, sem barra horizontal */
html, body {
height: 100%;
}
.row.no-gutter {
margin-left: 0;
margin-right: 0;
min-height: 100vh;
overflow-x: hidden;
}
/* =========================================================================
1. PAINEL DE MARCA (esquerda)
-------------------------------------------------------------------------
Composicao propria em CSS no lugar do mockup de device antigo: aquela
imagem mostrava a UI que estamos justamente substituindo.
========================================================================= */
/* -------------------------------------------------------------------------
FUNDO UNICO (sem emenda no meio da tela)
O painel esquerdo tinha gradiente proprio e a coluna do formulario era
branca: na divisa aparecia uma LINHA vertical nitida, denunciando que sao
duas telas coladas. Agora o gradiente vai no e cobre a largura toda;
o painel fica transparente e so posiciona o conteudo.
------------------------------------------------------------------------- */
.bg-image {
background: transparent !important;
background-image: none !important;
position: relative;
overflow: visible;
flex-direction: column;
justify-content: center;
padding: 4rem 4.5rem;
/* O teto era "max-height: 100vh". Com a arte ancorada na base do painel,
esse teto virou defeito na tela de CADASTRO: la o formulario e mais alto
que a janela (875px em 768px de altura), a pagina rola, mas o painel
parava em 100vh -- ao rolar, a personagem terminava no meio do ar com uma
faixa vazia de 107px embaixo dela.
Agora o painel acompanha a altura da linha (comportamento padrao de
coluna flex), e a arte encosta na base de verdade. O teto que importa
continua existindo, mas no lugar certo: e o max-height em vh da propria
ilustracao que impede o painel de esticar o documento no login. */
}
/* a coluna do formulario tambem fica transparente para o fundo atravessar */
.login,
.login .container,
.row.no-gutter {
background: transparent !important;
}
/* -------------------------------------------------------------------------
SEM SCROLL NA TELA DE LOGIN
O .login vem com "py-5" do Bootstrap (3rem em cima + 3rem embaixo) SOMADO ao
min-height: 100vh das colunas — o documento passava a viewport em 24px e
aparecia uma barra de rolagem vertical numa tela que cabe inteira.
box-sizing + padding vertical zerado resolve na origem.
------------------------------------------------------------------------- */
@media (min-height: 700px) {
.login.py-5 {
padding-bottom: 0 !important;
padding-top: 0 !important;
}
}
.image,
.row.no-gutter,
.row.no-gutter > [class*="col-"] {
box-sizing: border-box;
}
/* A .row do Bootstrap tem margin lateral negativa (-15px) e as colunas tem
padding de 15px. Com "min-height: 100vh" nas colunas, esse padding somava
a altura e o documento passava a viewport em 16px — barra de rolagem numa
tela que cabe inteira. Zerar as gutters resolve na origem.
Sobre overflow: a .row precisa deixar a arte SANGRAR na horizontal (senao o
shape aparece cortado a esquerda) mas CONTER na vertical — quando o texto +
a ilustracao passavam da altura da tela, o documento crescia 260px e nascia
uma barra de rolagem sem nada para rolar.
"clip" corta so onde e pedido; o eixo x fica visivel. */
.row.no-gutter {
margin-left: 0;
margin-right: 0;
overflow-x: visible;
overflow-y: clip;
}
/* No celular o painel da arte some (d-none do Bootstrap) e sobra so o
formulario - nao ha mais ilustracao para transbordar, entao o "clip"
acima perde a razao de existir e passa a ATRAPALHAR: com o teclado
aberto ele decepa o rodape do cartao, e o que foi cortado nao volta
nem rolando a pagina. */
@media (max-width: 767.98px) {
.row.no-gutter {
overflow-y: visible;
}
}
/* o container do Bootstrap empurrava tudo 15px para a direita */
.container-fluid {
padding-left: 0 !important;
padding-right: 0 !important;
}
.row.no-gutter > [class*="col-"] {
padding-left: 0;
padding-right: 0;
}
/* a coluna do formulario recupera o respiro interno por conta propria */
.login {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
/* -------------------------------------------------------------------------
ROLAGEM DA TELA DE LOGIN
Antes o tinha style="overflow: hidden" inline no JSP. Inline vence
folha de estilo, entao a rolagem ficava travada em QUALQUER altura de tela
e o dedo nao tinha o que arrastar no celular (a roda do mouse e o scroll
por script ainda funcionavam - dai o sintoma parecer "so no celular").
Havia aqui uma media query de max-height 699px devolvendo o scroll, mas
celular nenhum e tao baixo: um iPhone tem 844px.
"auto" resolve os dois casos de uma vez: nao cria barra quando o conteudo
cabe (era o medo original, e o que as regras de gutter/padding acima ja
evitam na origem) e libera a rolagem - inclusive por toque - quando o
conteudo passa da tela, que e o caso do teclado aberto ou fonte grande. */
body {
overflow-y: auto;
}
/* rolagem com inercia no iOS; sem isso o gesto trava seco no fim */
html {
-webkit-overflow-scrolling: touch;
}
/* IMPORTANTE: so vira flex a partir de md. Sem este media query, um
"display:flex !important" vence o .d-none do bootstrap e o painel de marca
ocupa a tela inteira no celular, empurrando o formulario para fora — ou
seja, ninguem consegue logar pelo telefone. */
@media (min-width: 768px) {
.bg-image {
display: flex !important;
}
}
/* blobs da marca */
.bg-image::before,
.bg-image::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}
/* Shapes do mockup: um halo laranja no alto a direita e uma mancha lilas
grande na base a esquerda, atras da ilustracao. Sao maiores e mais suaves
que a versao anterior — antes ficavam pequenos demais para "ler" como
composicao de fundo. */
/* O halo laranja era pequeno e ficava "solto" no alto, parecendo um erro em
vez de elemento de composicao. Agora e amplo e difuso: le como luz de fundo,
nao como bolinha. */
.bg-image::before {
width: 820px;
height: 820px;
top: -380px;
right: -280px;
background: radial-gradient(circle at 45% 50%, rgba(253, 109, 34, .13), rgba(253, 109, 34, 0) 62%);
}
/* A mancha lilas do CSS foi desligada (09/08/2026): a propria ilustracao traz
uma mancha lilas, de borda definida, exatamente na mesma posicao. As duas
juntas nao se somavam -- uma difusa por baixo de outra nitida le como halo
sujo em volta do recorte, e era parte do efeito de "adesivo colado".
O halo laranja (::before) fica: ele mora atras do cartao de login, do outro
lado do painel, e nao disputa area com a arte. */
.bg-image::after {
display: none;
}
.up-brand-panel {
position: relative;
z-index: 2;
max-width: 460px;
}
/* -------------------------------------------------------------------------
ILUSTRACAO DO PAINEL DE MARCA
O layout antigo usava a foto como background com "background-size: cover",
que preenche o painel cortando as bordas da imagem — a pessoa aparecia
decepada e a arte perdia o enquadramento.
Aqui ela e um com object-fit: contain: aparece inteira em qualquer
proporcao de tela.
Posicionamento conforme o mockup: texto e imagem formam UM bloco, centrado
verticalmente no painel. A arte encosta na base e sangra pela esquerda
(margin negativa), saindo levemente da area visivel — e o que da a sensacao
de composicao integrada em vez de "foto colada no rodape".
------------------------------------------------------------------------- */
/* o painel centra o conjunto (texto + arte) na vertical */
.bg-image {
justify-content: center !important;
padding: 0 !important;
}
/* -------------------------------------------------------------------------
FECHA O VAZIO CENTRAL
Medido no navegador: sobravam 322px (18% da viewport) entre a borda direita
da ilustracao e a esquerda do card — o olho atravessava um "deserto" no meio
da tela. A coluna do formulario passa a alinhar o card A ESQUERDA do seu
espaco, em vez de centralizado, aproximando os dois blocos.
------------------------------------------------------------------------- */
@media (min-width: 992px) {
.login .container {
margin-left: 0;
max-width: 520px;
padding-left: 0;
}
.login {
justify-content: flex-start !important;
}
/* A coluna da esquerda nao precisa de metade da tela: com 50/50 sobravam
539px (23%) de vazio no meio, porque o conteudo dela ocupa ~670px. */
.row.no-gutter > .bg-image {
flex: 0 0 56%;
max-width: 56%;
}
.row.no-gutter > .col-md-8 {
flex: 0 0 44%;
max-width: 44%;
}
/* O painel da esquerda ALINHA O CONTEUDO A DIREITA da sua coluna.
Com porcentagem fixa o vazio central crescia junto com a tela (461px em
1920px). Empurrando o conteudo para o lado interno, a distancia ate o
card fica constante em qualquer largura — e a arte continua sangrando
pela esquerda porque tem margem negativa propria. */
.bg-image {
align-items: flex-end;
}
}
/* Em telas muito largas o conjunto para de esticar: a composicao tem uma
largura ideal e, passando dela, so aumentaria o vazio. */
@media (min-width: 1600px) {
.bg-image {
padding-left: 0 !important;
padding-right: 3rem !important;
}
.up-brand-panel {
max-width: 600px;
padding-left: 0;
padding-right: 0;
}
}
/* -------------------------------------------------------------------------
WIDESCREEN / ULTRAWIDE
Sem limite, em monitor 21:9 as duas colunas se afastavam ate as bordas e a
composicao "rasgava" no meio. A linha inteira ganha largura maxima e fica
centrada, entao o conjunto se mantem coeso em qualquer monitor.
------------------------------------------------------------------------- */
/* NAO limitar a largura da .row aqui.
A tentativa anterior usava "max-width: 1600px; margin: auto", o que centrava
a linha inteira e abria 293px de margem vazia a ESQUERDA — a ilustracao
deixava de encostar na borda e o shape lilas parecia cortado.
Em ultrawide quem se limita e o CONTEUDO de cada coluna, nao a linha: o
painel esquerdo mantem a arte colada na borda e o card da direita para de
correr para longe. */
/* (o ajuste de tela larga esta consolidado no bloco min-width: 1600px acima —
dois breakpoints concorrentes para o mesmo fim so criavam conflito) */
/* logo dentro do card de login (como no mockup) */
.up-login-logo {
margin-bottom: 26px;
text-align: center;
}
.up-login-logo img {
height: 40px;
width: auto;
}
/* No painel da esquerda o logo sai: ja aparece dentro do card, e dois logos
na mesma tela competiam entre si. !important porque a regra base de
.up-brand-logo (height/margin) vem depois no arquivo. */
@media (min-width: 768px) {
.bg-image .up-brand-panel .up-brand-logo {
display: none !important;
}
}
/* O texto acompanha a largura da ilustracao. Antes o painel estava travado em
520px dentro de uma coluna de 1153px: o titulo quebrava em 3 linhas, a arte
ficava encolhida no canto e sobravam 539px (23% da tela) de vazio no meio.
Agora os dois ocupam a mesma faixa e a composicao fica coesa. */
.up-brand-panel {
max-width: 640px;
padding: 0 2rem 1.5rem 4.5rem;
}
/* o titulo cabe em 2 linhas, como no mockup (estava quebrando em 3) */
.up-brand-title {
max-width: 560px;
}
/* o subtitulo nao precisa ser tao largo quanto o titulo */
.up-brand-sub {
max-width: 480px;
}
/* Telas baixas: a arte encolhe pela LARGURA (nao por max-height, que
distorceria a proporcao). Assim o shape continua inteiro e o conjunto
cabe sem gerar barra de rolagem.
Os valores saem da auditoria responsiva: em 1280x720 e 768x1024 a arte
passava ~25px da base, entao cada faixa recebe uma largura que garante que
a altura resultante (largura x 0.75, pela proporcao 4:3) caiba. */
@media (max-height: 900px) {
.up-brand-panel {
padding-bottom: 1.2rem;
}
}
@media (max-height: 800px) {
.up-brand-panel {
padding-bottom: 1rem;
}
}
@media (max-height: 700px) {
}
/* TABLET RETRATO (768-991px): o painel de marca SOME.
Medido em 768x1024: com o split de 56/44 a coluna esquerda fica com apenas
256px, o texto empilha ate 909px de altura e empurra a ilustracao 22px para
fora da tela. Espremer mais a arte so a tornaria ilegivel.
Nessa faixa o formulario ocupa a tela inteira — mesmo criterio ja usado no
celular, e o login continua sendo o objetivo da pagina. */
@media (min-width: 768px) and (max-width: 991px) {
.bg-image {
display: none !important;
}
.row.no-gutter > .col-md-8 {
flex: 0 0 100%;
max-width: 100%;
}
.login {
justify-content: center !important;
}
.login .container {
margin: 0 auto;
max-width: 480px;
}
}
/* telas medias: painel mais estreito, menos sangria */
@media (max-width: 1199px) {
.up-brand-panel {
padding-left: 3rem;
padding-right: 2rem;
}
}
.up-brand-logo {
height: 42px;
margin-bottom: 3rem;
}
.up-brand-eyebrow {
color: var(--up-orange);
font-size: 13px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: .9rem;
}
.up-brand-title {
color: var(--up-ink);
font-size: 2.35rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
.up-brand-title em {
color: var(--up-orange);
font-style: normal;
}
.up-brand-sub {
color: var(--up-ink-500);
font-size: 1rem;
line-height: 1.6;
margin-bottom: 2.5rem;
}
/* lista de diferenciais */
/* Icones com mais presenca: maiores, mais espacados e com sombra quase
imperceptivel. No tamanho anterior (42px) eles sumiam ao lado do titulo. */
.up-brand-feature {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 1.7rem;
}
.up-brand-feature-icon {
flex: 0 0 50px;
width: 50px;
height: 50px;
border-radius: 15px;
background: rgba(253, 109, 34, .09);
box-shadow: 0 2px 8px rgba(253, 109, 34, .10);
color: var(--up-orange);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.up-brand-feature:nth-child(even) .up-brand-feature-icon {
box-shadow: 0 2px 8px rgba(116, 100, 209, .10);
}
.up-brand-feature:nth-child(even) .up-brand-feature-icon {
background: rgba(116, 100, 209, .10);
color: var(--up-purple);
}
.up-brand-feature-title {
color: var(--up-ink);
font-size: 15px;
font-weight: 700;
line-height: 1.3;
}
.up-brand-feature-desc {
color: var(--up-ink-500);
font-size: 13.5px;
line-height: 1.5;
}
/* =========================================================================
2. LADO DO FORMULARIO
========================================================================= */
.login {
align-items: center;
background: #FFFFFF;
display: flex;
min-height: 100vh;
}
.login .container {
max-width: 520px;
}
/* o py-5 do bootstrap empurrava o card para cima */
.login.py-5 {
padding-bottom: 2rem !important;
padding-top: 2rem !important;
}
/* O card "flutua" em vez de parecer uma caixa branca colada no fundo:
sombra em duas camadas (uma difusa e larga, outra curta e proxima) e borda
quase imperceptivel. E o mesmo recurso que da profundidade no site. */
.up-login-card {
background: linear-gradient(180deg, #FFFFFF 0%, #FDFDFE 100%);
border: 1px solid rgba(226, 232, 240, .8);
border-radius: 20px;
box-shadow:
0 1px 2px rgba(16, 24, 40, .04),
0 12px 24px -8px rgba(16, 24, 40, .08),
0 40px 64px -32px rgba(116, 100, 209, .16);
padding: 2.8rem 2.6rem;
}
.up-login-title {
color: var(--up-ink);
font-size: 1.5rem;
font-weight: 700;
text-align: center;
margin-bottom: .35rem;
}
.up-login-sub {
color: var(--up-ink-500);
font-size: .95rem;
text-align: center;
margin-bottom: 2rem;
}
/* --- campos ---
O login legado usa o padrao "float label" do BS4: o