/* ===========================================================================
03 · LAYOUT
O esqueleto da tela do painel: sidebar fixa, conteúdo ao lado dela, barra
do topo e a gaveta do celular.
As consultas de mídia ficam JUNTO do que elas mexem, não num bloco
"responsivo" no fim do arquivo. Motivo que não é estilo, é correção: a
ordem da cascata decide quem ganha entre duas regras de mesma
especificidade, e um bloco responsivo no fim do arquivo passa a vencer
componentes declarados depois dele. É o caso de `.card.cobranca`:
`@media (max-width: 768px) .card { padding: 16px }` contra
`.cobranca { padding: 0 }`. Com o breakpoint junto do dono, a ordem da
cascata é a ordem de leitura e não tem como errar sem perceber.
TOKEN SÓ ONDE ELE DIZ A VERDADE: `--esp-*` é espaço (margin, padding, gap),
`--txt-*` é tamanho de fonte. Largura de caixa de ícone, deslocamento de
sombra e espessura de borda continuam literais, porque chamar 40px de
"espaçamento 10" numa largura é o tipo de apelido que faz alguém mudar o
token e quebrar outra coisa.
=========================================================================== */
/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar {
width: 280px;
background: linear-gradient(180deg, var(--dark-card) 0%, var(--dark-deep) 100%);
border-right: 1px solid var(--dark-border);
padding: 0;
position: fixed;
height: 100vh;
overflow-y: auto;
z-index: var(--z-sidebar);
}
.sidebar-header {
/* O padding VERTICAL e o mesmo da .topbar (--esp-4), para as duas barras do
topo terminarem na mesma linha: a borda de baixo da sidebar e a da topbar
sao visualmente uma so, e qualquer diferenca aparece como um degrau.
Eram 24px aqui contra 16px la, 8px em cima e 8px embaixo, o que deixava
este bloco 16px mais alto que a barra ao lado. O padding horizontal
continua --esp-6, que e o da sidebar, nao o da topbar. */
padding: var(--esp-4) var(--esp-6);
border-bottom: 1px solid var(--dark-border);
background: linear-gradient(135deg, var(--dark-header-a) 0%, var(--dark-header-b) 100%);
}
/* A imagem do logo, na sidebar. A altura e fixa e a largura acompanha, porque
e a altura que decide se a borda de baixo da .sidebar-header continua
alinhada com a da topbar. `display: block` tira o espaco de linha de base que
um , e o segundo não tem efeito
numa caixa travada em 20px (eram herança do do Font Awesome, onde o
ícone era um glifo de texto). A separação do rótulo é o `gap: 12px` do
`.nav-item`, sozinho, desde que a margem duplicada do `.icone` saiu. */
.nav-item .icone {
width: 20px;
height: 20px;
}
.nav-item span {
font-size: var(--txt-corpo);
font-weight: var(--peso-normal);
}
.nav-badge {
margin-left: auto;
background: var(--danger);
color: white;
font-size: var(--txt-nota);
padding: 2px var(--esp-2);
border-radius: var(--raio-md);
font-weight: var(--peso-medio);
}
/* ── Conteúdo ao lado da sidebar ───────────────────────────────────────── */
.main-content {
margin-left: 280px;
min-height: 100vh;
/* min-width: 0 é o que permite encolher quando o conteúdo é largo */
min-width: 0;
max-width: calc(100% - 280px);
}
/* ── Barra do topo ─────────────────────────────────────────────────────── */
.topbar {
background: var(--dark-card);
border-bottom: 1px solid var(--dark-border);
padding: var(--esp-4) var(--esp-8);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--esp-3);
flex-wrap: wrap;
position: sticky;
top: 0;
z-index: var(--z-topbar);
}
.page-title {
font-size: var(--txt-pagina);
font-weight: var(--peso-forte);
color: white;
min-width: 0;
overflow-wrap: anywhere;
}
.topbar-actions {
display: flex;
align-items: center;
/* 8px, o mesmo de `.quick-actions`, `.cobranca-acoes`, `.barra-filtros` e
das ações da blacklist. Eram 16px aqui, o dobro do resto do sistema. */
gap: var(--esp-2);
flex-wrap: wrap;
}
/* A etiqueta de status não é botão: 101x33px com raio 20px no meio de botões de
36 a 40px com raio 8px. `margin-left: auto` manda ela para o fim da linha, e
a posição passa a declarar sozinha que ela não pertence ao grupo. Substitui o
`.ml-2` que ela tinha na view, que só a afastava 8px do botão anterior.
O `flex: 1 1 auto` ACOMPANHA e não é enfeite: `margin-left: auto` só empurra
se a caixa tiver folga, e `.topbar-actions` encolhe para o conteúdo. Medido a
768, 1024 e 1366px, a barra saía com exatamente a largura do conteúdo, auto
resolvia 0 e a etiqueta ficava a 8px do botão Excluir, MAIS perto do grupo do
que os 24px de antes (gap 16 + margem 8), ou seja o contrário do pretendido.
Com a folga, ela vai ao fim e o vão passa a 55px a 1366px.
O `:has(> .status)` limita isso às duas telas que têm a etiqueta (detalhe de
empréstimo e de venda). Sem ele, a barra cresceria em TODAS as telas e o
grupo de botões, hoje encostado à direita pelo `space-between` da `.topbar`,
migraria para junto do título em todo o painel.
Em até 768px nada muda: ali `width: 100%` já manda, e `flex-basis: auto` lê
essa largura, então a barra continua ocupando a linha inteira. */
/* O grupo inteiro encosta a DIREITA. Com a barra esticada e so o `.status`
empurrado por `margin-left: auto`, os botoes ficavam colados no titulo e o
status sozinho la na outra ponta, com um vazio de centenas de pixels no meio
(medido no detalhe do contrato a 1400px: acoes de 260 a 1080, titulo
terminando em 249). O dono pediu os botoes a direita. */
.topbar-actions:has(> .status) {
justify-content: flex-end;
flex: 1 1 auto;
}
.topbar-actions > .status {
/* Uma folga maior que o gap, e NAO `margin-left: auto`. A margem automatica
engole todo o espaco livre antes dela, o que empurrava o status para a
borda direita e deixava os botoes colados no titulo, com centenas de
pixels de vazio no meio (medido a 1400px: titulo terminando em 249 e os
botoes comecando em 260, com o status sozinho em 995).
Com a folga fixa o grupo inteiro encosta a direita pelo
`justify-content: flex-end`, e a etiqueta continua separada o bastante
para nao parecer mais um botao da fila. */
margin-left: var(--esp-6);
}
/* ── Corpo da página ───────────────────────────────────────────────────── */
.page-content {
padding: var(--esp-8);
min-width: 0;
}
/* ── Gaveta do celular ─────────────────────────────────────────────────────
ATENÇÃO: `.menu-toggle { display: none }`, `.sidebar-overlay { display:
none }` e `.sidebar-overlay.active { display: block }` são regras de
VISIBILIDADE comandadas por JavaScript: `toggleSidebar()`, em
views/elite-cred/layouts/scripts.ejs, liga `.sidebar.open` e
`.sidebar-overlay.active`. Trocar o valor aqui não é ajuste de estilo, é
quebrar a navegação do celular em todas as telas do painel. */
/* O BOTAO DO MENU FICA NO FIM DA BARRA, com o titulo na ponta esquerda.
A ordem veio do MARKUP (os dois includes de topbar poem o primeiro) e
nao de `order`, porque `order` move na tela sem mover no DOM, e o foco do
teclado iria ao botao antes do titulo, numa posicao que nao corresponde ao
que se ve.
O `order: 1` abaixo e so para o painel: la o botao fica entre o titulo e as
`.topbar-actions` no DOM, e hoje nao aparece em largura nenhuma (acima de
1024 a sidebar e fixa, abaixo quem abre a gaveta e o "Mais" da barra
inferior). Se voltar a aparecer, vai para o fim da barra e nao para o meio. */
.topbar > .menu-toggle { order: 1; }
.menu-toggle {
display: none;
width: 40px;
height: 40px;
background: var(--dark-lighter);
border: 1px solid var(--dark-border);
border-radius: var(--raio);
align-items: center;
justify-content: center;
color: var(--gold);
cursor: pointer;
font-size: var(--txt-titulo);
}
.sidebar-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--preto-a70);
z-index: var(--z-veu);
}
.sidebar-overlay.active {
display: block;
}
/* ── Barra de navegação do celular ─────────────────────────────────────────
Os 4 destinos mais usados mais o "Mais", que abre a gaveta de sempre. Sai
de views/elite-cred/layouts/barra-inferior.ejs, emitida pelo include da
sidebar.
ELA NÃO SUBSTITUI A SIDEBAR NO DOM, E ISSO É LOAD-BEARING: as 8 tabelas que
viram cartão abaixo de 600px (04-componentes) descobrem em que tela estão
por `body:has(.nav-item.active[href$="..."])`, ou seja, pelo item ativo da
sidebar. A sidebar continua renderizada (só deslocada por translateX), e as
classes daqui são próprias de propósito: um `.nav-item.active` nesta barra
faria duas telas casarem ao mesmo tempo e os rótulos das colunas sairiam
trocados, sem erro nenhum. O estado ativo vai em `aria-current`.
O 56px aparece duas vezes (aqui e no `padding-bottom` do `.main-content`),
como os 280px da sidebar: é medida de componente, não espaçamento, e não
vira token por causa de duas ocorrências.
`env(safe-area-inset-bottom)` devolve 0 onde não existe, então a conta vale
em qualquer aparelho sem teste de suporte. Quem o faz valer no iPhone é o
`viewport-fit=cover` da meta em layouts/head.ejs. */
.barra-inf {
display: none; /* o @media de 1024px acende; ver "Breakpoints" abaixo */
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-barra-inf);
grid-template-columns: repeat(5, 1fr);
height: calc(56px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
background: var(--dark-card);
border-top: 1px solid var(--dark-border);
}
/* Dois níveis de classe (0,2,0) e não um só: `.menu-toggle` viaja no botão
"Mais" para herdar o JavaScript da gaveta, e tanto a regra dele aqui em
cima quanto a de 06-interacao são de UMA classe. Com um nível só, a de
06-interacao ganharia por vir depois na cascata e devolveria ao "Mais" a
caixa de 40px do hambúrguer. */
.barra-inf .barra-inf-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px; /* ajuste óptico entre ícone e rótulo, não espaçamento */
height: 56px;
/* O alvo é a célula inteira: 56px de altura por 72px de largura a 360px,
e 64px a 320px. Os dois lados passam dos 44px exigidos.
`width: 100%` NÃO é redundante com o `1fr` da grade: o botão "Mais"
carrega `.menu-toggle` para herdar o JavaScript, e com ele vem o
`width: 40px` do hambúrguer, que vence o esticamento padrão da célula.
Medido antes desta linha: 40px contra os 72px dos outros quatro. */
width: 100%;
min-width: 0;
padding: 0 2px;
border: 0;
border-radius: 0;
background: none;
color: var(--text-muted);
font-family: inherit;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* 22px e não os 20px da sidebar: lá o rótulo fica ao LADO e dá escala ao
ícone; aqui ele fica embaixo, com no máximo 11px, e o ícone precisa
carregar sozinho a leitura à distância do braço. */
.barra-inf .barra-inf-item .icone {
width: 22px;
height: 22px;
}
/* O RÓTULO ENCOLHE SOZINHO NAS TELAS ESTREITAS, e o `min()` não é preciosismo:
medido no Chrome com a Inter carregada, "Empréstimos" e "Recuperação" pedem
69px em 11px, e a célula a 360px (a largura de Android mais comum) oferece
68px. Em 11px fixo os dois saíam cortados com reticências a 360 e a 320px,
que são as duas larguras que mais importam, e só a 390px passavam a caber.
2,85vw é o coeficiente que deixa pelo menos 3px de respiro de cada lado em
toda a faixa: 9,1px a 320, 10,3px a 360, e a partir de 390 o `min()` trava
em 11px, que é o tamanho desenhado. O texto nunca cresce além dele.
As reticências FICAM mesmo assim: elas são a rede para a tela estreita que
não previmos, e cortar texto é sempre melhor que estourar a largura da
página, que é o defeito que este CSS inteiro existe para não ter. */
.barra-inf .barra-inf-rotulo {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: min(var(--txt-nota), 2.85vw);
font-weight: var(--peso-normal);
line-height: 1;
}
/* A barra de 2px no TOPO do item é o espelho da borda esquerda de 3px do
`.nav-item` da sidebar. Vai de `box-shadow` interno e não de `border-top`:
borda entraria na altura e teria que ser declarada transparente nos outros
quatro itens para a linha não dançar. */
.barra-inf .barra-inf-item[aria-current="page"] {
color: var(--gold);
box-shadow: inset 0 2px 0 var(--gold);
}
/* ── Breakpoints do esqueleto ──────────────────────────────────────────────
O .stats-grid não é mais forçado a um número fixo de colunas em nenhum
breakpoint: o auto-fit com min() já acomoda de 320px a 4K sozinho. Fixar
colunas aqui era o que fazia o conteúdo vazar entre 1024px e 1300px.
Os breakpoints NÃO viram token: `@media` não resolve `var()`, então um
`--bp-tablet` seria um nome que não funciona justamente onde importa. */
@media (max-width: 1024px) {
/* A GAVETA ENTRA PELA DIREITA, do mesmo lado do botao que a abre (o
hamburguer da barra no portal, o "Mais" da barra inferior no painel).
Gaveta nascendo do lado oposto ao controle faz o dedo atravessar a tela
atras do que acabou de tocar.
As tres linhas andam juntas e nenhuma serve sozinha: `right: 0` com
`left: auto` ancora na outra margem (sem isso ela segue presa a esquerda
e o translate positivo a jogaria para fora da tela, abrindo um vazio de
280px), o `translateX(100%)` e o esconderijo do lado certo, e a borda
troca de lado porque a direita quem encosta no conteudo e o lado
esquerdo dela.
So aqui dentro: acima de 1024px a sidebar nao e gaveta, e a coluna fixa
da esquerda com o `.main-content` recuado por `margin-left`. */
.sidebar {
left: auto;
right: 0;
border-right: 0;
border-left: 1px solid var(--dark-border);
transform: translateX(100%);
transition: transform var(--dur-media) var(--curva);
}
.sidebar.open { transform: translateX(0); }
/* O `padding-bottom` é o preço da barra fixa: sem ele o último botão de
cada tela fica embaixo dela e não há rolagem que o alcance. */
.main-content { margin-left: 0; max-width: 100%; padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
.menu-toggle { display: flex; }
.barra-inf { display: grid; }
/* O AVISO DE "COPIADO" SOBE, senão a barra o engole.
Ele é um `position: fixed; bottom: 24px` declarado inline em três telas
(loan-success, payment-success e payment-receipt), sem `z-index`: com a
barra em 90, ela passa a ser pintada por cima dele, e o único retorno
visual de que o código foi copiado some no celular.
80px é 56 da barra mais os 24 que ele já tinha de folga, e o
`!important` é o que vence o `style=` da view: o seletor mais específico
do mundo perde para um estilo inline. É o único `!important` desta
camada, e ele existe porque a correção está aqui e não nas três views. */
#copySuccess {
z-index: calc(var(--z-barra-inf) + 1);
bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}
/* O HAMBÚRGUER DA TOPBAR SAI onde a barra inferior entra, e os dois
breakpoints são o MESMO de propósito: o pedido foi trocar o hambúrguer
pela barra, e dois controles abrindo a mesma gaveta na mesma tela é
affordance duplicada. O botão continua no HTML, só não é pintado: assim
a troca inteira vive numa camada só e volta atrás apagando esta linha.
O seletor é `.topbar >` porque o "Mais" também é `.menu-toggle`: sem o
pai, esta regra apagaria os dois. */
.topbar > .menu-toggle { display: none; }
}
@media (max-width: 768px) {
.page-content { padding: var(--esp-4); }
.topbar { padding: var(--esp-3) var(--esp-4); gap: var(--esp-2); }
.page-title { font-size: var(--txt-titulo); }
.topbar-actions { gap: var(--esp-2); width: 100%; }
/* Dois por linha, em vez de flex: 1 solto. Com flex: 1 cada botão divide
o que sobra da LINHA, então o último de uma linha incompleta estica
sozinho: medido a 620px, Excluir ia de 473 a 596 e espremia a etiqueta
de status contra a borda, cortando-a. Com base de 50% cada linha tem
dois botões do mesmo tamanho, e a conta não depende de quantos sobraram. */
.topbar-actions .btn { flex: 1 1 calc(50% - var(--esp-2)); justify-content: center; }
/* A ETIQUETA MEDE O TEXTO, nunca a linha. Ela tinha `flex: 1 0 100%`, e o
`grow` junto da base de 100% a inflava para a largura inteira: uma
pastilha de 367px com "Ativa" no meio deixa de parecer etiqueta e vira
um botão chapado, que foi o que o dono apontou.
`0 0 auto` devolve o tamanho do conteúdo. Ela continua caindo numa linha
própria quando não cabe ao lado dos botões, porque disso quem cuida é o
`flex-wrap`, e agora sem esticar. */
.topbar-actions > .status {
flex: 0 0 auto;
margin-left: 0;
/* `align-self` porque o `stretch` logo abaixo alcança TODO item da
barra, e a pastilha ia junto: de 33 para 44px de altura. Pastilha
alta demais deixa de parecer pastilha, que é o defeito de cima
virado de lado. */
align-self: center;
}
/* BOTÕES DA MESMA LINHA COM A MESMA ALTURA. Medido a 390px: "Registrar
Pagamento" saía 176x51 porque o texto quebra em duas linhas naquela
largura, e os vizinhos ficavam em 44, com a fila desalinhada.
Os vizinhos não acompanhavam por causa do `align-items: center` da
barra: centrado, cada item fica com a própria altura. `stretch` só aqui,
porque acima de 768px os botões cabem numa linha e ali o alinhamento
vertical é com o título. */
.topbar-actions { align-items: stretch; }
}
@media (max-width: 480px) {
.page-content { padding: var(--esp-3); }
.topbar { padding: 10px var(--esp-3); }
.page-title { font-size: var(--txt-destaque); }
}