/* Modo claro/escuro: mesmo mecanismo do admin do Django (data-theme no
, guardado em localStorage sob a chave "theme") — continuamos
reaproveitando o admin/js/theme.js dele pra aplicar o tema, sem
reescrever essa parte. Só dois modos (claro/escuro, sem "auto"/sistema)
e o padrão é escuro — por isso o bloco escuro é o que casa com :root
(sem data-theme definido cai no escuro), e "light" é a exceção
explícita. A escolha em si mora no menu de engrenagem
(core/_cabecalho.html), não num botão solto no cabeçalho. */
html[data-theme="dark"],
:root {
--cor-primaria: #5B9BE0;
--cor-primaria-clara: #7FB1E8;
--cor-secundaria: #5B9BE0;
--cor-fundo: #12181F;
--cor-secao: #1B222C;
--cor-borda: #2B3543;
--cor-texto: #E7ECF2;
--cor-texto-suave: #9AA7B5;
--cor-erro: #E5837B;
--cor-sucesso: #6FCB84;
/* Âmbar de "atenção" (ex.: prazo que vence hoje) — tom claro pro fundo
escuro. */
--cor-aviso: #E0B25B;
/* Campos de preenchimento (pedido #105): fundo/borda PRÓPRIOS pros
inputs, distintos do fundo da página E do fundo de seção, pra o campo
não sumir. No escuro, um tom mais claro que os dois. */
--cor-campo: #222B37;
--cor-borda-campo: #3C4A5C;
--fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--raio: 6px;
color-scheme: dark;
}
html[data-theme="light"] {
--cor-primaria: #0B1F3A;
--cor-primaria-clara: #132C4D;
--cor-secundaria: #1E73BE;
--cor-fundo: #FFFFFF;
--cor-secao: #F4F6F8;
--cor-borda: #E1E5EA;
--cor-texto: #1F2933;
--cor-texto-suave: #5A6672;
--cor-erro: #B3261E;
--cor-sucesso: #1E7B34;
/* Âmbar de "atenção" no modo claro: mais escuro pra manter contraste
de texto sobre fundo branco. */
--cor-aviso: #9A6A00;
/* Campos de preenchimento (pedido #105) no modo claro: fundo branco com
borda nítida — o campo se destaca tanto sobre a página quanto sobre um
painel cinza-claro (--cor-secao). */
--cor-campo: #FFFFFF;
--cor-borda-campo: #B6C0CB;
color-scheme: light;
}
* {
box-sizing: border-box;
}
/* O atributo `hidden` do HTML tem que VENCER (issue #281). O navegador o
aplica como `display:none` na folha do próprio navegador, que perde de
qualquer classe nossa com `display` (flex, grid, block) — foi assim que
dois painéis do Propoutmos nasceram abertos. Com esta regra, marcar
`hidden` no HTML esconde de verdade em todo o sistema, e ninguém
precisa lembrar de escrever `.minha-classe[hidden]` caso a caso.
`!important` é proposital: é a mesma solução do normalize.css. */
[hidden] {
display: none !important;
}
/* Texto só para leitor de tela: some da vista sem sumir da acessibilidade.
Serve a cabeçalho de coluna de AÇÕES e a rótulo de campo que a tela já
explica visualmente — o leitor de tela precisa da palavra, o olho não.
A classe já era usada em três telas (Permissões do CLM, Carteiras e agora
o Catálogo) sem nunca ter sido definida, então o texto "Ações" aparecia na
tela como um cabeçalho solto. `clip-path` em vez de `display:none` porque
o segundo esconde de todo mundo, inclusive do leitor de tela. */
.visualmente-oculto {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
body {
margin: 0;
font-family: var(--fonte);
color: var(--cor-texto);
background: var(--cor-fundo);
line-height: 1.5;
}
header.topo {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem;
border-bottom: 1px solid var(--cor-borda);
}
/* Só o LOGO precisa disto: inline-flex + line-height 0 matam o vão que a
linha de texto deixa embaixo de um do mesmo menu nunca sofreram — a regra não os alcançava —, e
é por isso que "Quem está no sistema" sempre quebrou certo.
Mesma família da regra "nunca metade" do CLAUDE.md: regra global que
decide layout de um elemento por tabela alcança elementos que ela nunca
quis governar. */
header.topo a.topo-logo {
display: inline-flex;
line-height: 0;
}
.topo-direita {
display: flex;
align-items: center;
gap: 0.5rem;
}
header.topo img {
height: 32px;
}
/* Logo troca de versão conforme o tema — mesma lógica de data-theme das
cores acima. Os dois / do menu de engrenagem, só que o "resumo"
é redondo (foto ou iniciais) em vez de um ícone. "Sair" mora dentro
dele agora, junto com o resto (regra do Daniel: um botão só). */
.menu-usuario {
position: relative;
}
.menu-usuario summary {
list-style: none;
cursor: pointer;
user-select: none;
display: block;
border-radius: 50%;
}
.menu-usuario summary::-webkit-details-marker {
display: none;
}
.menu-usuario-avatar {
width: 2rem;
height: 2rem;
border-radius: 50%;
object-fit: cover;
display: block;
}
.menu-usuario-iniciais {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--cor-secundaria);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 600;
}
.menu-usuario summary:hover .menu-usuario-iniciais,
.menu-usuario[open] .menu-usuario-iniciais {
background: var(--cor-primaria);
}
.menu-usuario summary:hover .menu-usuario-avatar,
.menu-usuario[open] .menu-usuario-avatar {
outline: 2px solid var(--cor-secundaria);
outline-offset: 1px;
}
.menu-usuario .menu-engrenagem-itens form {
margin: 0;
}
/* Menu de engrenagem (Administração / Saúde), canto superior direito.
/ dá um dropdown nativo, sem precisar de JavaScript. */
.menu-engrenagem {
position: relative;
}
.menu-engrenagem summary {
list-style: none;
cursor: pointer;
font-size: 1.3rem;
line-height: 1;
padding: 0.4rem 0.6rem;
border-radius: var(--raio);
user-select: none;
}
.menu-engrenagem summary::-webkit-details-marker {
display: none;
}
.menu-engrenagem summary:hover,
.menu-engrenagem[open] summary {
background: var(--cor-secao);
}
.menu-engrenagem-itens {
position: absolute;
right: 0;
top: 100%;
margin-top: 0.4rem;
background: var(--cor-fundo);
border: 1px solid var(--cor-borda);
border-radius: var(--raio);
min-width: 160px;
/* O painel é absoluto dentro de um do tamanho do avatar (2rem),
então a largura "disponível" para ele é ~2rem e o encolhimento levava
todo item mais largo que o piso de 160px a quebrar em duas linhas
("Quem está no sistema" sempre quebrou assim). max-content faz o painel
acompanhar o item mais largo; o max-width impede que um rótulo longo o
jogue para fora da tela num celular. */
width: max-content;
max-width: min(90vw, 22rem);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
z-index: 10;
}
.menu-engrenagem-itens a,
.menu-engrenagem-itens button {
display: block;
width: 100%;
text-align: left;
padding: 0.6rem 1rem;
background: transparent;
border: none;
color: var(--cor-texto);
text-decoration: none;
font-size: 0.9rem;
cursor: pointer;
}
.menu-engrenagem-itens a:hover,
.menu-engrenagem-itens button:hover {
background: var(--cor-secao);
color: var(--cor-texto);
}
/* Layout com barra lateral, usado em toda tela pós-login/2FA. */
.layout {
display: flex;
/* stretch (não flex-start): a barra lateral acompanha a altura da coluna
mais alta (o conteúdo), então o número da versão — jogado pro pé da
barra por margin-top:auto — fica sempre no RODAPÉ da barra, e não no
meio quando o conteúdo é mais alto que ela (issue #144). */
align-items: stretch;
}
/* Casca de aplicativo (issue #214): a janela inteira é o sistema — cabeçalho
em cima, e o resto da altura dividido entre barra lateral e conteúdo, cada
um rolando POR DENTRO. Antes a barra lateral crescia com a lista de
projetos e esticava a PÁGINA: quem tinha muitos projetos ganhava uma página
alta com um quadro curto no canto, porque o quadro se dimensiona pela
altura da JANELA (issue #41), não pela da página. Sem número mágico de
altura de cabeçalho aqui: o flex mede o que sobrou. Vale só nas telas com
a classe "casca" (core/base.html): login/2FA seguem sendo um cartão
centralizado numa página normal, e o /admin/ monta a própria página. */
body.casca {
display: flex;
flex-direction: column;
height: 100vh;
}
body.casca .layout {
flex: 1;
/* min-height:0 é o que permite os filhos rolarem por dentro em vez de
empurrar a casca pra fora da janela (padrão de item flex). */
min-height: 0;
}
body.casca .conteudo-principal {
overflow-y: auto;
}
/* Impressão: a casca volta a ser uma página normal, senão o navegador
imprimiria só a primeira tela e cortaria o resto do conteúdo. */
@media print {
body.casca,
body.casca .layout,
body.casca .conteudo-principal,
body.casca .barra-lateral {
display: block;
height: auto;
overflow: visible;
}
}
.barra-lateral {
/* Largura ajustável arrastando a borda (issue #231): o valor mora numa
variável CSS pro tema do admin (margin-left do #container) acompanhar
a mesma preferência sem regra duplicada. */
width: var(--largura-barra-lateral, 220px);
flex-shrink: 0;
position: relative;
border-right: 1px solid var(--cor-borda);
padding: 1.5rem 1rem;
/* Lista comprida de projetos rola aqui dentro (issue #214). O
overflow-x continua escondido: é ele que corta o texto dos links
durante a animação de encolher a barra. */
overflow-y: auto;
overflow-x: hidden;
transition: width 0.15s ease;
/* Flex-column pra a versão (margin-top:auto) cair no rodapé DA BARRA e
não virar uma coluna vazia ao lado dela (issue #102). */
display: flex;
flex-direction: column;
}
.barra-lateral.encolhida {
width: 44px;
padding: 1.5rem 0.5rem;
}
/* Alça de ajuste de largura (issue #231): um fio na borda direita, quase
invisível até o hover; some com a barra encolhida (lá a largura é fixa).
Durante o arrasto, a classe "ajustando" desliga as transições de
largura — senão a barra "persegue" o mouse com atraso. */
.barra-lateral-ajuste {
position: absolute;
top: 0;
right: -3px;
bottom: 0;
width: 7px;
cursor: col-resize;
z-index: 40;
touch-action: none;
}
.barra-lateral-ajuste:hover,
.barra-lateral-ajuste.arrastando {
background: color-mix(in srgb, var(--cor-acento, #2563eb) 45%, transparent);
}
.barra-lateral.encolhida .barra-lateral-ajuste { display: none; }
body.ajustando-barra-lateral .barra-lateral,
body.ajustando-barra-lateral #container {
transition: none !important;
}
/* Sem seleção acidental de texto enquanto se arrasta a alça. */
body.ajustando-barra-lateral { user-select: none; }
.barra-lateral.encolhida .barra-lateral-links {
display: none;
}
.barra-lateral-toggle {
display: block;
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
color: var(--cor-texto-suave);
padding: 0.3rem 0.5rem;
margin-bottom: 1rem;
border-radius: var(--raio);
}
.barra-lateral-toggle:hover {
background: var(--cor-secao);
}
.barra-lateral a {
display: block;
padding: 0.5rem 0.75rem;
border-radius: var(--raio);
color: var(--cor-texto);
text-decoration: none;
font-size: 0.95rem;
margin-bottom: 0.2rem;
white-space: nowrap;
}
.barra-lateral a:hover {
background: var(--cor-secao);
}
/* Contador ao lado de um item da barra lateral (ex.: "Empresas repetidas 84").
Mora AQUI, no CSS global, e não na folha do módulo: a barra lateral aparece
em TODA tela do sistema, e a folha do CRM só é carregada nas telas do CRM —
fora dele o número saía como texto solto, sem pílula nenhuma.
Declara fundo E cor do texto juntos (regra dos dois temas): o :hover do link
troca o fundo em volta, e sem a cor própria o número seguiria a herança.
Vale para o contador de qualquer módulo: o CRM estreou o desenho e o Caloi
("Aprovações 3") passou a usá-lo. Cada módulo traz a sua classe para esta
lista em vez de repetir a regra — assim os contadores da barra continuam
idênticos entre si, que é o ponto de eles morarem aqui. */
.barra-lateral a .crm-pill,
.barra-lateral a .caloi-pill {
display: inline-block;
/* O respiro entre o rótulo e o número: sem ele os dois encostam e "Empresas
repetidas 84" é lido como uma coisa só. Casa com o 0.35rem do ícone. */
margin-left: 0.4rem;
padding: 0.12rem 0.6rem;
border-radius: 999px;
font-size: 0.82em;
background: var(--cor-pill-fundo, rgba(120, 140, 255, 0.16));
color: var(--cor-pill-texto, var(--cor-texto));
white-space: nowrap;
}
/* Módulos com sub-menu () — ver
comentário em _barra_lateral.html com o padrão a copiar. */
.barra-lateral-links summary {
display: block;
padding: 0.5rem 0.75rem;
border-radius: var(--raio);
color: var(--cor-texto);
cursor: pointer;
font-size: 0.95rem;
list-style: none;
user-select: none;
white-space: nowrap;
}
.barra-lateral-links summary::-webkit-details-marker {
display: none;
}
.barra-lateral-links summary::before {
content: '▸';
display: inline-block;
width: 1em;
transition: transform 0.1s ease;
}
.barra-lateral-links details[open] summary::before {
transform: rotate(90deg);
}
.barra-lateral-links summary:hover {
background: var(--cor-secao);
}
.barra-lateral-links .submenu {
padding-left: 1.3rem;
}
.barra-lateral-links .submenu a {
font-size: 0.88rem;
/* #32: nomes de quadro compridos QUEBRAM em vez de estourar a barra.
O flex mantém o ícone fixo à esquerda (flex-shrink:0) e o rótulo numa
coluna própria; min-width:0 deixa o link encolher, white-space:normal
desfaz o nowrap herdado de ".barra-lateral a", e overflow-wrap:anywhere
quebra até nomes longos sem espaço. */
display: flex;
align-items: center;
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
/* Barra lateral organizável (issues #203 e #205): categorias pessoais e
projetos arrastáveis. Segue as diretrizes de UI do projeto — rótulos em
caixa alta e baixa, ação destrutiva como ícone discreto que só aparece
no hover mas SEMPRE alcançável pelo teclado, criação inline sem botão
fixo, e respiro em vez de caixas com fundo marcado. */
.barra-lateral-links .categoria-projetos > summary {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
color: var(--cor-texto-suave);
padding: 0.35rem 0.75rem;
}
.barra-lateral-links .categoria-projetos > summary .categoria-nome {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
white-space: normal;
}
/* O ✕ da categoria: invisível até o hover na linha ou o foco por teclado
(nunca display:none, senão sumiria da navegação por Tab). */
.categoria-apagar {
background: none;
border: 0;
color: var(--cor-texto-suave);
cursor: pointer;
font-size: 0.8rem;
line-height: 1;
padding: 0.15rem 0.3rem;
border-radius: var(--raio);
opacity: 0;
transition: opacity 0.1s ease;
}
.categoria-projetos > summary:hover .categoria-apagar,
.categoria-apagar:focus {
opacity: 1;
}
.categoria-apagar:hover,
.categoria-apagar:focus {
color: var(--cor-erro);
background: var(--cor-secao);
}
.categoria-projetos-lista {
border-radius: var(--raio);
}
/* Altura mínima pra lista VAZIA aceitar um projeto arrastado — mas só
ENQUANTO um projeto está sendo arrastado (classe posta pelo JS no
dragstart). Fora do arrasto ela colapsa a zero: era essa reserva
permanente que deixava um espaço morto entre a última categoria
minimizada e o "+ Novo projeto" (issue #441). */
.projetos-da-barra.arrastando-projeto .categoria-projetos-lista {
min-height: 0.9rem;
}
.categoria-projetos-lista.alvo-ativo {
background: var(--cor-secao);
outline: 1px dashed var(--cor-borda);
}
.barra-lateral a.projeto-arrastando {
opacity: 0.4;
}
.barra-lateral a[data-projeto] {
cursor: grab;
}
/* Categoria arrastável (issue #440): o título é a alça — mesmo cursor e
mesmo esmaecimento do arraste de projeto. */
.barra-lateral-links .categoria-projetos > summary {
cursor: grab;
}
.categoria-projetos.categoria-arrastando {
opacity: 0.4;
}
/* Conteúdo da seção "Todos os projetos": RECUADO, com um fio guia à
esquerda ligando os projetos ao título que os contém. Sem isto os
filhos ficavam mais à esquerda que o pai e a hierarquia lia ao
contrário — o "está feio" que o Daniel reportou em 2026-07-29. */
.projetos-da-barra {
margin-left: 0.85rem;
padding-left: 0.55rem;
border-left: 1px solid var(--cor-borda);
}
/* Criar categoria: em repouso é uma LINHA (um "+" e um rótulo apagado),
no mesmo ritmo dos projetos — nada de caixa. Só o foco desenha o
campo. Antes isto era um input com borda e fundo, gêmeo da busca logo
abaixo, e era lido como um segundo campo de busca. */
.nova-categoria-linha {
display: flex;
align-items: center;
gap: 0.1rem;
margin-top: 0.1rem;
}
/* "Novo projeto" (issue #436): a AÇÃO que as pessoas procuram no fim da
lista — fica com o "+" e com a cor de destaque, pra não ser confundida
com a criação de categoria logo abaixo (que é só organização da barra).
Fundo e cor do texto declarados JUNTOS nos dois estados (regra "nunca
metade" do CLAUDE.md). */
.barra-lateral a.novo-projeto-linha {
display: flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.35rem;
padding: 0.3rem 0.4rem 0.3rem 0.75rem;
font-size: 0.85rem;
border-radius: var(--raio);
background: transparent;
color: var(--cor-primaria);
text-decoration: none;
}
.barra-lateral a.novo-projeto-linha:hover,
.barra-lateral a.novo-projeto-linha:focus-visible {
background: var(--cor-secao);
color: var(--cor-primaria);
}
.novo-projeto-mais {
flex: none;
font-size: 1rem;
line-height: 1;
}
/* Ícone de pasta da linha de categoria (issue #436): mesmo comportamento
do antigo "+" — apagado em repouso, firme no hover/foco da linha. */
.nova-categoria-pasta {
flex: none;
width: 0.9rem;
height: 0.9rem;
margin-left: 0.75rem;
color: var(--cor-texto-suave);
}
.nova-categoria-linha:hover .nova-categoria-pasta,
.nova-categoria-linha:focus-within .nova-categoria-pasta {
color: var(--cor-texto);
}
/* Especificidade acima de input[type="text"] (regra global de formulário,
base.css): sem os dois seletores ela vence e devolve borda e fundo de
campo ao repouso — foi exatamente o que aconteceu na primeira tentativa
de deixar este campo discreto. */
.barra-lateral input.nova-categoria {
flex: 1;
min-width: 0;
width: auto;
margin: 0;
padding: 0.3rem 0.4rem;
font-size: 0.85rem;
font-family: inherit;
color: var(--cor-texto);
background: transparent;
background-color: transparent;
border: 1px solid transparent;
border-radius: var(--raio);
}
.barra-lateral input.nova-categoria::placeholder {
color: var(--cor-texto-suave);
}
.barra-lateral input.nova-categoria:focus {
outline: none;
background-color: var(--cor-campo);
border-color: var(--cor-borda-campo);
}
.conteudo-principal {
flex: 1;
padding: 2rem;
/* Issue #60: sem isto, o quadro largo ALARGA a página inteira (item
flex tem min-width:auto por padrão) e a rolagem horizontal vira da
tela toda — o overflow-x do .abana-quadro nunca era acionado. */
min-width: 0;
}
/* Sem sessão autenticada+verificada (login, 2FA): sem barra lateral,
volta a ser um cartão único centralizado — só troca via CSS, o HTML é
o mesmo em toda tela (ver base.html). */
body:not(.logado) .barra-lateral {
display: none;
}
body:not(.logado) .conteudo-principal {
flex: none;
width: 100%;
max-width: 480px;
margin: 3rem auto;
padding: 0 1.5rem;
}
.grade-metricas {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
margin-top: 1.5rem;
}
.grade-metricas h2 {
font-size: 1rem;
color: var(--cor-primaria);
margin: 0 0 0.5rem;
}
.grade-metricas p {
margin: 0.2rem 0;
}
h1 {
font-size: 1.5rem;
font-weight: 700;
color: var(--cor-texto);
margin-bottom: 0.5rem;
}
/* Tabelas de listagem (projetos, membros etc.) — nenhuma tinha estilo
próprio até aqui, só o padrão sem formatação do navegador. */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5rem;
}
th,
td {
text-align: left;
padding: 0.65rem 0.9rem;
border-bottom: 1px solid var(--cor-borda);
}
th {
color: var(--cor-texto-suave);
font-weight: 600;
font-size: 0.8rem;
}
/* Caixa alta SÓ em cabeçalho de COLUNA (thead) — célula-cabeçalho de
LINHA () carrega DADOS (ex.: e-mails na tela de
adicionar vários usuários) e não pode ser transformada (issue #14). */
thead th {
text-transform: uppercase;
letter-spacing: 0.03em;
}
tbody tr:hover {
background: var(--cor-secao);
}
p {
color: var(--cor-texto-suave);
}
.cartao {
background: var(--cor-fundo);
border: 1px solid var(--cor-borda);
border-radius: var(--raio);
padding: 1.5rem;
/* Nomes de arquivo (ex.: do último backup) não têm espaço pra quebrar
naturalmente — sem isso, uma string longa empurra a borda do cartão. */
overflow-wrap: break-word;
min-width: 0;
}
label {
display: block;
font-size: 0.9rem;
color: var(--cor-texto);
margin-bottom: 0.3rem;
}
/* Rótulo que ENVOLVE uma caixa de seleção (issue #238): caixa e texto na
mesma linha, alinhados — o display:block do rótulo global os separava
em duas linhas. Clicar no texto alterna a caixa (é o mesmo label). */
.rotulo-caixa {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0;
cursor: pointer;
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 0.6rem 0.75rem;
border: 1px solid var(--cor-borda-campo);
border-radius: var(--raio);
font-family: inherit;
font-size: 1rem;
margin-bottom: 1rem;
background-color: var(--cor-campo);
color: var(--cor-texto);
}
/* Contraste E forma dos campos de preenchimento (pedido #105 + issue #159):
dar fundo, borda, cantos, fonte e espaçamento PRÓPRIOS aos controles de
formulário reais — que antes herdavam o fundo da página (sumiam) e, no
caso de