/* Marca One v2 (aplicada 26/09/2026): Figtree no texto, servida daqui mesmo (static/fonts/figtree, licença OFL). Arquivo variável: um só cobre 400 a 700. A Poppins (títulos) vem do Google Fonts no base.html. A Qanelas Soft saiu. */ @font-face { font-family: 'Figtree'; src: url("../fonts/figtree/Figtree-latin-ext.eca8d8b337ff.woff2") format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Figtree'; src: url("../fonts/figtree/Figtree-latin.202cfb54d4e6.woff2") format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Cor primária (azul) */ --cor-primaria: #0057FF; /* Títulos escuros (estilo único 26/09/2026; antes azuis). */ --cor-titulo: #0B1633; --cor-primaria-hover: #0046CC; --cor-primaria-texto: #0047D1; /* azul de link/texto (contraste AA) */ --cor-primaria-suave: #E8F0FF; /* fundo azul claro (item ativo, etiqueta) */ --cor-primaria-clara: #7FA6F7; --cor-primaria-mais-clara: #C2D6FB; /* Cor secundária (laranja) */ --cor-secundaria: #FF7900; --cor-secundaria-hover: #F25D00; --cor-secundaria-clara: #FDBD86; --cor-secundaria-mais-clara: #FDDCC0; --cor-secundaria-suave: #FFF4EA; /* fundo de alerta (atrasado/parado) */ --cor-secundaria-texto: #8A3E00; /* texto de alerta sobre fundo suave */ /* Cor terciária (azul-céu) */ --cor-terciaria: #66C0E8; --cor-terciaria-clara: #85CBE7; --cor-terciaria-mais-clara: #BAE0F0; /* Cor sombra (azul-marinho escuro) */ --cor-sombra: #0A2A6C; /* Texto (estilo único 26/09/2026, valores da home nova e do login). */ --cor-texto: #0B1633; --cor-texto-secundario: #55617A; --cor-aprovado: #1B873F; /* Verde escuro para texto sobre fundo claro de sucesso (o --cor-aprovado dá só 3,9:1 sobre #E3F5E9). Já existia escrito cru como #1C6B34/#256B38; auditoria 25/10 deu nome. */ --cor-aprovado-texto: #1C6B34; --cor-reprovado: #D92D20; --cor-reprovado-escura: #B42318; --cor-neutra: #6B7280; --cor-alerta: #9a6b00; /* Laranja escuro dos Indicadores (faixas intermediárias, "sem movimento") e da pendência parcial; antes escrito cru como #c07800 em 23 lugares (auditoria 28/09). Nome sem "alerta": [style*="--cor-alerta"] no .ind-kpi desenha uma faixa lateral. */ --cor-laranja-escuro: #a05f00; /* era #c07800 (contraste 3,5:1); auditoria 25/10 subiu para 5,1:1 (WCAG AA) */ /* Roxo dos status "aguardando cliente" / "vistoria não acompanhada" / "aguardando conversão". Estava escrito cru (#9b27af, #f3e5f7) em 6 arquivos; auditoria 25/10 só deu nome, cor idêntica. */ --cor-roxo: #9b27af; --cor-roxo-suave: #f3e5f7; /* Já usada como #e3f5e9 cru em vários badges/cartões de sucesso; alguns avisos de "salvo com sucesso" já referenciam var(--cor-aprovado-mais-clara, #eafaf0) — um tom levemente diferente do resto (achado real 25/09). Define o token de verdade aqui pra esses avisos convergirem pro mesmo tom sem precisar editar cada tela (a var definida vence o fallback). */ --cor-aprovado-mais-clara: #e3f5e9; --cor-reprovado-mais-clara: #fbe6e4; /* Brancos */ --cor-fundo: #F4F6FA; --cor-fundo-alternado: #FAFBFD; --cor-superficie: #FFFFFF; --cor-borda: #D9E0EC; --cor-borda-leve: #EEF1F6; --cor-cinza-medio: #C4C4C4; --cor-cinza-claro: #E2E2E2; /* Marca One v2 (aprovada pela Thais 26/09/2026): Figtree no texto, Poppins nos títulos. Documentos gerados (contratos etc.) não usam estas fontes e não mudam. */ --fonte-principal: 'Figtree', 'Segoe UI', system-ui, sans-serif; --fonte-titulo: 'Poppins', 'Segoe UI', system-ui, sans-serif; /* Escala de espaçamento (auditoria §18, 26/09/2026). Tela nova usa só estes; 6px/10px/14px que aparecem soltos são herança anterior à escala. */ --espaco-xs: 4px; --espaco-sm: 8px; --espaco-md: 12px; --espaco-lg: 16px; --espaco-xl: 20px; --espaco-xxl: 24px; --raio-borda-bloco: 12px; --raio-borda-cta: 8px; /* Cartão com borda fina, sem sombra (estilo único 26/09/2026). */ --sombra-card: none; --sombra-navbar: 0px 0px 5px 0px #474747; } * { box-sizing: border-box; } body { font-family: var(--fonte-principal); color: var(--cor-texto); background-color: var(--cor-fundo); margin: 0; } /* Bug conhecido do
(usado em toda seção de Detalhes da Negociação e outros formulários, pra travar tudo dentro quando request.membro.papel == 'corretor'): diferente de uma
comum, o
tem min-width baseado no próprio conteúdo por padrão no CSS do navegador — não encolhe pra caber numa tela estreita, empurrando a página inteira pra mais larga que o celular (achado real 2026-08-21, responsivo mobile do acesso de corretores: 53px de conteúdo cortado numa tela de 375px, causa era um
com uma barra de ferramentas do editor de texto rico dentro). Correção padrão, sem efeito nenhum em telas largas onde já havia espaço de sobra.*/ fieldset { min-width: 0; } h1, h2, h3, h4, h5, h6 { color: var(--cor-titulo); font-family: var(--fonte-titulo); font-weight: 400; margin: 0 0 var(--espaco-xl) 0; } h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; } p { font-size: 15px; line-height: 1.5; color: var(--cor-texto-secundario); } a { color: var(--cor-primaria); } /* Botões */ .botao-principal { /* Azul desde a marca One v2 (26/09/2026); antes laranja. Laranja agora é só destaque (contadores, avisos, item ativo do menu). */ background-color: var(--cor-primaria); color: #fff; border-radius: var(--raio-borda-cta); padding: var(--espaco-md) 25px; font-family: var(--fonte-principal); font-weight: 500; text-transform: none; border: none; cursor: pointer; display: inline-block; text-decoration: none; } .botao-principal:hover { background-color: var(--cor-primaria-hover); } .botao-contornado { background-color: transparent; border: 1px solid var(--cor-primaria); color: var(--cor-primaria); border-radius: var(--raio-borda-cta); padding: var(--espaco-md) 25px; font-family: var(--fonte-principal); font-weight: 500; text-transform: none; cursor: pointer; display: inline-block; text-decoration: none; } .botao-contornado:hover { background-color: var(--cor-primaria); color: #fff; } /* Ação destrutiva confirmada (ex.: "Sim, excluir"). Antes era .botao-principal com style="background-color: var(--cor-reprovado)" inline — o inline vencia o :hover, então o botão não reagia ao mouse (achado 25/09, unificação das telas de confirmação de exclusão). */ .botao-perigo { background-color: var(--cor-reprovado); color: #fff; border-radius: var(--raio-borda-cta); padding: var(--espaco-md) 25px; font-family: var(--fonte-principal); font-weight: 500; text-transform: none; border: none; cursor: pointer; display: inline-block; text-decoration: none; } .botao-perigo:hover { background-color: var(--cor-reprovado-escura); } /* Tela de confirmação de exclusão — componente único (templates/componentes/confirmar_exclusao.html), usado por Locação, Rescisão, Vendas e Jurídico, individual e em lote. */ .confirmacao-exclusao { max-width: 560px; display: grid; gap: var(--espaco-lg); } .confirmacao-exclusao__pergunta { display: flex; gap: var(--espaco-md); align-items: flex-start; margin: 0; color: #333; } .confirmacao-exclusao__icone { flex: none; width: 34px; height: 34px; border-radius: 50%; background-color: var(--cor-reprovado-mais-clara); color: var(--cor-reprovado); display: grid; place-items: center; } .confirmacao-exclusao__icone svg { width: 18px; height: 18px; } .confirmacao-exclusao__aviso { display: block; color: var(--cor-reprovado); font-weight: 500; font-size: 13px; margin-top: 2px; } .confirmacao-exclusao__dados { margin: 0; padding: 14px 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--espaco-lg); font-size: 14px; border-top: 1px solid var(--cor-borda-leve); border-bottom: 1px solid var(--cor-borda-leve); } .confirmacao-exclusao__dados dt { color: var(--cor-texto); } .confirmacao-exclusao__dados dd { margin: 0; color: #1d2b45; font-weight: 500; overflow-wrap: anywhere; } .confirmacao-exclusao__itens { margin: 0; padding: var(--espaco-md) 0; list-style: none; display: grid; gap: var(--espaco-sm); border-top: 1px solid var(--cor-borda-leve); border-bottom: 1px solid var(--cor-borda-leve); } .confirmacao-exclusao__itens li { display: grid; gap: 1px; } .confirmacao-exclusao__itens strong { color: #1d2b45; font-weight: 500; } .confirmacao-exclusao__itens span { font-size: 13px; color: var(--cor-texto); } .confirmacao-exclusao__consequencias { background-color: var(--cor-reprovado-mais-clara); border-radius: 8px; padding: var(--espaco-md) 14px; } .confirmacao-exclusao__consequencias p { margin: 0; font-size: 13px; color: #5c1a14; } .confirmacao-exclusao__acoes { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; } /* Cartão */ .cartao { background-color: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio-borda-bloco); box-shadow: var(--sombra-card); padding: var(--espaco-xl); } /* Badges de status */ .badge-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; } .badge-status--aprovado { background-color: #e3f5e9; color: var(--cor-aprovado); } /* Pontinho ao lado do rótulo de um campo que é usado tanto no Contrato de Locação quanto no Contrato de Administração (ver CAMPOS_*_COMPARTILHADOS em forms.py) — avisa que mudar esse campo afeta os dois contratos. Clicável: reúne todos os itens contratuais da tela (ver _painel_itens_contratuais.html, incluído em toda tela que usa label_com_marcador). Trocou de uma etiqueta de texto cheia ("Item Contratual", acima do rótulo — usada de 2026-07-15 até aqui) pra esse pontinho discreto a pedido da Thais em 2026-07-17: em telas com muitos campos compartilhados (ex. Detalhes da Negociação), a etiqueta repetida ficava poluindo a tela. O significado agora é explicado uma vez só, na legenda do topo da tela (ver .legenda-item-contratual). Cor laranja (a secundária da marca, --cor-secundaria) em vez de azul (a primária) — pedido dela no mesmo dia: azul já é usado demais no resto da tela (títulos, botões, links), laranja se destaca sem confundir. */ .ponto-item-contratual { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cor-secundaria); margin-right: 6px; margin-bottom: 1px; cursor: pointer; } .ponto-item-contratual:hover { background: var(--cor-secundaria-hover); box-shadow: 0 0 0 4px var(--cor-secundaria-mais-clara); } /* Colchetes vazios ("[ ]") que sobram no título de uma tarefa de Implantação quando a variável ainda não tem valor (ver implantacao.services.renderizar_titulo + filtro destacar_pendencia) — reproduz o destaque do sistema antigo pra chamar atenção pro que falta preencher. Laranja (--cor-secundaria) pelo mesmo motivo do .ponto-item-contratual: azul já é usado demais no resto da tela. */ .titulo-a-preencher { color: var(--cor-secundaria-texto); background: var(--cor-secundaria-mais-clara); border-radius: 4px; padding: 0 3px; font-weight: 600; } /* Colchetes já preenchidos ("[CPFL]") no título de uma tarefa de Implantação — azul mais escuro que o resto do título (--cor-sombra), pra distinguir de relance o dado dinâmico do texto fixo (pedido da Thais, 2026-08-25, depois de ver o resultado dos colchetes na tela). */ .titulo-preenchido { color: #001B4D; font-weight: 600; } /* Quando o colchete vira link de verdade (services.renderizar_titulo_html, pedido da Thais 2026-08-25: "levar direto pro campo que falta preencher") — tira o sublinhado/azul padrão de link, já que a cor de destaque acima (laranja ou azul-escuro) já indica que é clicável; sublinha só no hover pra dar a pista de que é um link. */ a.titulo-a-preencher, a.titulo-preenchido { text-decoration: none; cursor: pointer; } a.titulo-a-preencher:hover, a.titulo-preenchido:hover { text-decoration: underline; } /* Legenda única (uma por tela) explicando o pontinho acima — ver .ponto-item-contratual. */ .legenda-item-contratual { display: flex; align-items: center; gap: var(--espaco-sm); font-size: 12.5px; color: var(--cor-texto-secundario); margin-bottom: var(--espaco-lg); } .legenda-item-contratual .ponto-item-contratual { margin-right: 0; cursor: default; flex-shrink: 0; } .legenda-item-contratual .ponto-item-contratual:hover { background: var(--cor-secundaria); box-shadow: none; } /* Painel "Itens contratuais" que o pontinho acima abre (ver _painel_itens_contratuais.html) — reúne todo campo compartilhado com o Contrato de Administração, esteja ele em qual seção da tela estiver. Movido de detalhes_negociacao.html (2026-08-27) pra cá quando o painel passou a ser reaproveitado em mais telas (Novo/Editar processo, Informativo de Contas). */ .painel-itens-contratuais{display:none;position:fixed;inset:0;z-index:50} .painel-itens-contratuais.aberto{display:block} .painel-itens-contratuais-fundo{position:absolute;inset:0;background:rgba(0,0,0,.35)} .painel-itens-contratuais-conteudo{position:absolute;top:0;right:0;bottom:0;width:min(480px,92vw);background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.12);padding:22px;overflow-y:auto} .painel-itens-contratuais-cabecalho{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .painel-itens-contratuais-cabecalho h4{margin:0} .painel-itens-contratuais-intro{font-size:13px;color:var(--cor-texto-secundario);margin:0 0 18px} .grupo-item-contratual{margin-bottom:18px} .titulo-grupo-item-contratual{font-size:11px;font-weight:600;color:var(--cor-texto-secundario);text-transform:uppercase;letter-spacing:.04em;margin:0 0 var(--espaco-sm);padding-bottom:6px;border-bottom:1px solid var(--cor-borda-leve)} .autosave-status { display: inline-block; margin-left: 10px; font-size: 13px; color: var(--cor-texto-secundario); } .autosave-status--pendente { color: var(--cor-texto-secundario); } .autosave-status--salvo { color: var(--cor-aprovado); font-weight: 600; } .autosave-status--erro { color: var(--cor-reprovado); font-weight: 600; } .badge-status--reprovado { background-color: #fbe6e4; color: var(--cor-reprovado); } .badge-status--cancelado { background-color: #eceef1; color: var(--cor-neutra); } /* Situação de Análise de Crédito pausada (STATUS_CHOICES) — vinha duplicada igual em lista_analises.html e detalhe_analise.html (achado real 25/09); centralizada aqui pra não reescrever de novo em toda tela nova do módulo. */ .badge-status--pausado { background-color: #eceef1; color: var(--cor-neutra); } .badge-status--impedimento { background-color: #fff1dc; color: #b45f06; } .badge-status--desistencia { background-color: #fce4ec; color: #c2185b; } /* Cada status com cor própria — não repetir cor entre status (pedido da Thais 2026-07-26). Paleta espelhada da função badge() em indicadores.html, que já tinha sido ajustada antes só ali. */ .badge-status--em_analise, .badge-status--gerado { /* Contrato de Administração: documento gerado */ background-color: #e3ecfd; color: var(--cor-primaria); } .badge-status--contrato_enviado_assinatura, .badge-status--aguardando_assinaturas { /* Contrato de Administração */ background-color: #e5f4fb; color: #0A2A6C; } .badge-status--aguardando_documento { background-color: #fff2e2; color: var(--cor-secundaria-texto); } .badge-status--aguardando_data_inicio { background-color: #eaf0fe; color: var(--cor-primaria-clara); } .badge-status--aguardando_conversao { background-color: var(--cor-roxo-suave); color: var(--cor-roxo); } /* 3 status novos pedidos pela Thais 2026-08-06 (ver models.STATUS_CHOICES) — mesma paleta de indicadores.html/badge(). */ .badge-status--aguardando_retorno_confirmacoes { background-color: #fdf3d8; color: #9a6b00; } .badge-status--contratos_em_elaboracao { background-color: #f1e6dc; color: #8a5a34; } .badge-status--contratos_analise_externa { background-color: #dcf3f0; color: #0f8a76; } /* Status antigos da planilha de importação, não usados por nenhum processo desde a auditoria de 2026-07-26 (ver esteira_locacao.migrations 0101) — mantidos só pra não quebrar se aparecer algum registro histórico bem antigo. */ .badge-status--em_finalizacao, .badge-status--aguardando_finalizacao_assinaturas { background-color: var(--cor-roxo-suave); color: var(--cor-roxo); } .badge-status--finalizado { background-color: #e3f5e9; color: var(--cor-aprovado); } .badge-status--convertido { background-color: #e0e7f5; color: var(--cor-sombra); } /* Etapas do funil de Rescisão (rescisao/models.py STATUS_CHOICES) — uma cor própria por etapa, mesma convenção acima ("não repetir cor entre status"). concluido/desistencia/cancelado reaproveitam o badge já existente do vocabulário de Locação (mesmo conceito, cor consistente). */ .badge-status--primeiro_email_inquilino { background-color: #e8ecfe; color: #3550d6; } .badge-status--proprietario_informado { background-color: #e6e9fb; color: #4b3fbf; } .badge-status--segundo_email_inquilino { background-color: #e1f3fb; color: #0e7fa8; } .badge-status--anuncio_imovel { background-color: #fde8d2; color: #c4590a; } .badge-status--confirmacao_inquilino { background-color: #ddf4ee; color: #157c63; } .badge-status--entrega_chaves { background-color: #fbeed2; color: #92650a; } .badge-status--vistoria_realizada { background-color: #f0e4fb; color: #6b21a8; } .badge-status--retorno_laudo { background-color: #eee3fc; color: #5b21b6; } .badge-status--retorno_vistoria { background-color: #fce4f1; color: #a81e63; } .badge-status--retorno_inquilino { background-color: #fce4e9; color: #b0224a; } .badge-status--autorizacao_distrato { background-color: #f2e7dc; color: #7a4a1e; } .badge-status--envio_distrato { background-color: #ecf1d4; color: #5b6e17; } .badge-status--concluido { background-color: #e3f5e9; color: var(--cor-aprovado); } /* Status calculado do Pipeline de Rescisão (ProcessoRescisao.status_pipeline, Thais 10/09) — pendente_inicio/em_andamento/atrasado ganham cor própria aqui; concluido/cancelado reaproveitam os badges já existentes acima (mesmo conceito). Cores de em_andamento/atrasado espelham as já usadas pros chips de tarefa (chip-andamento/chip-atrasada) em tarefas_processo.html. */ .badge-status--pendente_inicio { /* laranja, a mesma cor dele nos Indicadores; o cinza ficava igual ao do Cancelado (Thais, 05/10/2026) */ background-color: var(--cor-secundaria-suave); color: var(--cor-secundaria-texto); } .badge-status--em_andamento { background-color: #E8F0FF; color: #0046D1; } .badge-status--atrasado { background-color: #fbe6e4; color: var(--cor-reprovado); } /* Situação no Kanban da Rescisão (ProcessoRescisao.situacao_kanban, 03/10/2026): em atraso = tarefa atrasada; em acompanhamento = passou da data final do aviso prévio sem tarefa atrasada. */ .badge-status--em_atraso { background-color: var(--cor-reprovado-mais-clara); color: var(--cor-reprovado-escura); } .badge-status--acompanhamento { background-color: var(--cor-secundaria-suave); color: var(--cor-secundaria-texto); } /* Status de Tarefa/Implantação (app implantacao) — vinha duplicado quase igual em checklist_processo.html, kanban.html e minhas_tarefas.html (achado real 25/09); centralizado aqui como os outros badges acima. */ .badge-status--formalizacao { background-color: #E8F0FF; color: #0046D1; } .badge-status--concluida { background-color: #e3f5e9; color: var(--cor-aprovado); } .badge-status--cancelada { background-color: #F1F2F5; color: #6B7280; } .badge-status--nao_iniciada, .badge-status--rascunho { /* Contrato de Administração: rascunho */ background-color: #F1F2F5; color: #6B7280; } .badge-status--aguardando_terceiro { background-color: #FFF4DE; color: #8A5A00; } .badge-status--aguardando_cliente { background-color: var(--cor-roxo-suave); color: var(--cor-roxo); } /* Pontuação de candidato a contrato (rescisao/visualizar_processo.html, card "aguardando aprovação" — match automático de e-mail com contrato) — vinha 100% inline no template, reinventando .badge-status (achado real 25/09). Mesmas 3 cores já usadas em outros badges do sistema. */ .badge-status--pontuacao-forte { background-color: #e3f5e9; color: var(--cor-aprovado); } .badge-status--pontuacao-media { background-color: var(--cor-secundaria-mais-clara); color: var(--cor-secundaria-texto); } .badge-status--pontuacao-fraca { background-color: #eef1f4; color: #4b5563; } /* Processo nascido sozinho de e-mail detectado, esperando alguém aprovar (services.processar_email_recebido, 10/09) — laranja de destaque (convenção "azul demais → laranja pra destaque"), cor própria pra não confundir com nenhum dos outros status do Pipeline. */ .badge-status--aprovacao { background-color: #FDDCC0; color: var(--cor-secundaria-texto); } /* Processo judicializado (ProcessoRescisao.em_juridico, 13/09) — vence qualquer outro status do Pipeline; cor própria (roxo), fora da paleta dos outros badges, pra ficar claro que não é mais um estágio normal do funil de rescisão. */ .badge-status--juridico { background-color: #ede7f6; color: #5e35b1; } /* Situação e risco do Processo Jurídico (juridico/models.py SITUACAO_CHOICES e RISCO_CHOICES). ativo/remoto reaproveitam o par verde de "aprovado" e provavel reaproveita o par vermelho de "reprovado" (mesmo significado: bom/ruim), já que são campos diferentes de "aprovado", não aparecem lado a lado na mesma coluna. suspenso/possivel usam --cor-alerta (âmbar), consolidado aqui como token oficial em vez de cor solta. */ .badge-status--ativo { background-color: #e3f5e9; color: var(--cor-aprovado); } .badge-status--suspenso { background-color: #fdf3d8; color: var(--cor-alerta); } .badge-status--encerrado { background-color: #eceef1; color: var(--cor-neutra); } /* Selo "Segredo de justiça" (ProcessoJuridico.segredo_justica) — preto/branco de propósito, alto contraste pra destacar de todos os outros badges de status (nunca usada pra nenhum outro status hoje). Vinha 100% inline em visualizar_processo.html (achado real 25/09). */ .badge-status--segredo_justica { background-color: #2d2d2d; color: #fff; } .badge-status--provavel { background-color: #fbe6e4; color: var(--cor-reprovado); } .badge-status--possivel { background-color: #fdf3d8; color: var(--cor-alerta); } .badge-status--remoto { background-color: #e3f5e9; color: var(--cor-aprovado); } /* Situação de Atendimento (SITUACAO_ATENDIMENTO_CHOICES) — ativo/concluido reaproveitam os badges já existentes (mesmo significado). */ .badge-status--arquivado, .badge-status--arquivada { background-color: #eceef1; color: var(--cor-neutra); } /* Situação de Intimação (SITUACAO_INTIMACAO_CHOICES). */ .badge-status--pendente { background-color: #fdf3d8; color: var(--cor-alerta); } .badge-status--processada { background-color: #e3f5e9; color: var(--cor-aprovado); } /* Tipo de lançamento financeiro (TIPO_LANCAMENTO_CHOICES). */ .badge-status--receita { background-color: #e3f5e9; color: var(--cor-aprovado); } .badge-status--despesa { background-color: #fbe6e4; color: var(--cor-reprovado); } /* Status calculado de um lançamento financeiro (pago/atrasado/em_aberto — não é um CharField com choices, é calculado em views.py a partir de pago/data_vencimento). atrasado reaproveita o badge já existente. */ .badge-status--pago { background-color: #e3f5e9; color: var(--cor-aprovado); } .badge-status--em_aberto { background-color: #fdf3d8; color: var(--cor-alerta); } /* Status calculado ativa/desativada (Workflow.ativo, booleano) e sim/não (Timesheet.faturavel, booleano) — mesma convenção verde/cinza. */ .badge-status--ativa, .badge-status--sim { background-color: #e3f5e9; color: var(--cor-aprovado); } .badge-status--desativada, .badge-status--nao { background-color: #eceef1; color: var(--cor-neutra); } /* Cartão de indicador (KPI) — componente reutilizável entre módulos, ver templates/componentes/cartao_indicador.html. Generaliza o padrão que já existia (repetido, cada um com seu próprio inline style) nas telas de indicadores/pipeline de cada módulo. */ .grade-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--espaco-md); margin-bottom: var(--espaco-xl); } .cartao-indicador { padding: 14px var(--espaco-lg); display: block; text-decoration: none; color: inherit; } .cartao-indicador__rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-secundario); } .cartao-indicador__valor { font-size: 26px; font-weight: 600; margin-top: var(--espaco-xs); } .cartao-indicador--alerta { border-left: 4px solid var(--cor-alerta); } .cartao-indicador--alerta .cartao-indicador__valor { color: var(--cor-alerta); } .cartao-indicador--perigo { border-left: 4px solid var(--cor-reprovado); } .cartao-indicador--perigo .cartao-indicador__valor { color: var(--cor-reprovado); } /* Painel de indicadores (Indicadores de Locação e de Rescisão): cartão grande com gráfico (.ind-card) e os números pequenos dentro dele (.ind-kpi). Antes cada tela tinha a própria cópia; unificado 26/09/2026. O número pequeno segue o desenho do cartão padrão (componentes/cartao_indicador.html) em versão compacta (mockup aprovado): rótulo em cima, número embaixo. O HTML vem do JS com o número antes do rótulo, por isso column-reverse. */ .ind-card{background:#fff;border:1px solid var(--cor-borda-leve);border-radius:var(--raio-borda-bloco);padding:18px;box-shadow:var(--sombra-card);min-width:0} .ind-card.ind-full{grid-column:1/-1} .ind-card-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--cor-borda-leve)} .ind-card-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px} .ind-card-title{font-size:13px;font-weight:600;color:var(--cor-sombra);flex:1} .ind-card-total-val{font-size:20px;font-weight:700;color:var(--cor-primaria);line-height:1;font-variant-numeric:tabular-nums} .ind-card-total-lbl{font-size:10px;color:var(--cor-texto);margin-top:2px} .ind-kpi-row{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap} .ind-kpi{flex:1;min-width:92px;background:var(--cor-fundo-alternado);border-radius:8px;padding:var(--espaco-sm) 10px;text-align:left;display:flex;flex-direction:column-reverse;justify-content:flex-end} .ind-kpi-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--cor-texto-secundario);line-height:1.3} .ind-kpi-val{font-size:18px;font-weight:600;color:var(--cor-sombra);margin-top:2px;font-variant-numeric:tabular-nums} /* Número neutro (o JS pinta de azul) fica marinho, como no cartão padrão; vermelho e âmbar ganham a faixa lateral de atenção. */ .ind-kpi-val[style*="--cor-primaria)"]{color:var(--cor-sombra)!important} .ind-kpi:has(> .ind-kpi-val[style*="--cor-reprovado"]){box-shadow:inset 3px 0 0 var(--cor-reprovado)} .ind-kpi:has(> .ind-kpi-val[style*="--cor-alerta"]){box-shadow:inset 3px 0 0 var(--cor-alerta)} /* Tabela de lista simples — componente reutilizável pra telas de listagem que não precisam do recurso de redimensionar/densidade automática de coluna (isso continua só em .tabela-processos, ver esteira_locacao). */ .tabela-lista { width: 100%; border-collapse: collapse; font-size: 13px; } .tabela-lista thead tr { text-align: left; border-bottom: 1px solid var(--cor-borda-leve); } .tabela-lista th { background: var(--cor-fundo-alternado); border-bottom: 1px solid var(--cor-borda); text-align: left; padding: 10px 14px; font-size: 12px; color: var(--cor-texto-secundario); font-weight: 600; white-space: nowrap; } .tabela-lista th a { color: inherit; text-decoration: none; } .tabela-lista th a:hover { color: var(--cor-primaria); } .tabela-lista td { padding: 10px 14px; border-bottom: 1px solid var(--cor-borda-leve); } .tabela-lista tbody tr:hover { background: var(--cor-fundo-alternado); } .tabela-lista tbody tr:last-child td { border-bottom: none; } /* Variante compacta: mesma altura de linha das pipelines de Locação, Rescisão e Vendas (.tabela-compacta). Usada nas listas do Jurídico (pedido da Thais 26/09: linhas estavam mais altas que nas outras). */ .tabela-lista--compacta th, .tabela-lista--compacta td { padding: 7px var(--espaco-md); } .tabela-lista--compacta .badge-status { font-size: 12px; padding: 3px 9px; } .tabela-lista--compacta .botao-excluir-icone { width: 28px; height: 28px; } /* Painel de pendências de cadastro (tela do processo) — visualmente diferente dos cartões brancos de cadastro: fundo colorido conforme o estado geral, badges compactos em vez de grade de campos. */ .painel-pendencias { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; border-radius: 12px; border-left: 4px solid var(--cor-secundaria); background-color: #fdece0; margin-bottom: var(--espaco-xl); } .painel-pendencias--completo { border-left-color: var(--cor-aprovado); background-color: #e3f5e9; } .painel-pendencias__cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-md); } .painel-pendencias__titulo { font-size: 14px; font-weight: 600; color: var(--cor-texto); margin: 0; } .painel-pendencias__resumo { font-size: 13px; color: var(--cor-texto-secundario); white-space: nowrap; } .painel-pendencias__lista { display: flex; flex-wrap: wrap; gap: var(--espaco-sm); } .badge-pendencia { display: inline-block; padding: var(--espaco-xs) var(--espaco-md); border-radius: 999px; font-size: 12.5px; font-weight: 500; background-color: rgba(255, 255, 255, 0.6); cursor: default; } .badge-pendencia--completo { color: var(--cor-aprovado); } .badge-pendencia--parcial { color: var(--cor-secundaria-texto); border-bottom: 1px dotted var(--cor-secundaria-hover); } .badge-pendencia--nao-iniciado { color: var(--cor-neutra); } /* Seção alternada */ .secao-alternada { background-color: var(--cor-fundo-alternado); } .oculto { /* !important porque esse elemento às vezes também tem outra classe que já declara display (ex.: .botao-acao, .grade-campos) — sem isso, a ordem no arquivo decide e "oculto" pode perder mesmo estando aplicado. */ display: none !important; } /* Formulários */ .secao-formulario { margin-bottom: 25px; } .secao-formulario:last-child { margin-bottom: 0; } .secao-formulario h3, .secao-formulario h4 { margin-top: 0; margin-bottom: 15px; font-size: 18px; } .secao-formulario h4 { font-size: 14px; font-weight: 500; color: var(--cor-texto-secundario); text-transform: uppercase; letter-spacing: 0.03em; } .grade-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px var(--espaco-xl); align-items: start; } .campo-formulario { margin-bottom: 5px; } /* Campo condicional (ex.: só de Pessoa Física, some quando é Jurídica) dentro de uma .grade-campos — usa visibility em vez de display:none pra MANTER o espaço reservado na grade. Sem isso, o campo seguinte "escorrega" pra preencher o buraco e acaba caindo numa coluna diferente da mesma grade em outro cartão onde o campo não sumiu (ex.: CPF do Proprietário Jurídico numa coluna, CPF do Locatário Física em outra — pedido da Thais 2026-08-15, ver Raio-X do ONE). Não usar a classe genérica ".oculto" aqui: ela é display:none!important e é reaproveitada em muitos outros lugares do sistema onde sumir de vez (sem reservar espaço) é o comportamento certo. */ .campo-formulario.campo-invisivel { visibility: hidden; } /* Selo "Atualiza ao vivo" (cartão de composição de cálculo que recalcula sozinho ao digitar) — estava copiado igual em cada tela que tinha esse selo (Informativo de Contas de Rescisão); centralizado aqui 07/09 pra toda tela nova só precisar da classe, sem repetir o style inline. */ .badge-ao-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--cor-aprovado); background: #e3f5e9; border-radius: 999px; padding: var(--espaco-xs) 10px; margin-bottom: 14px; } .badge-ao-vivo .ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--cor-aprovado); } /* Menu "Baixar" (Word/Excel/PDF) — antes duplicado em cada tela que tinha esse botão (Detalhes da Negociação, Informativo de Contas, Apuração de Comissões); centralizado aqui 2026-08-15 (item 49 do Raio-X do ONE) pra toda tela nova só precisar do HTML, sem copiar CSS de novo. */ .menu-relatorio-wrap { position: relative; display: inline-block; } .menu-relatorio { position: absolute; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--cor-borda); border-radius: 8px; box-shadow: var(--sombra-card); min-width: 200px; display: none; z-index: 5; overflow: hidden; } .menu-relatorio.aberto { display: block; } .menu-relatorio a { display: flex; align-items: center; gap: var(--espaco-sm); padding: 9px var(--espaco-md); font-size: 13px; color: var(--cor-texto); text-decoration: none; font-family: inherit; } .menu-relatorio a:hover { background: var(--cor-fundo-alternado); } /* Revertido em 15/08 — display:block no quebrava o alinhamento das colunas em tabelas com largura ajustável por JS (ver Pipeline: coluna de ações ficava fora da área visível). A ideia de rolar tabela larga no celular (item 36 do Raio-X do ONE) precisa de um contêiner com overflow-x envolvendo a tabela, não display:block nela mesma — fica pendente até ser feito assim, com mais cuidado. */ .campo-linha-toda { grid-column: 1 / -1; } .campo-formulario label { display: block; font-weight: 500; font-size: 14px; line-height: 1.3; min-height: 37px; margin-bottom: 5px; color: var(--cor-texto-secundario); } .valor-visualizacao { font-size: 14px; color: var(--cor-texto); padding: 10px; min-height: 20px; background-color: var(--cor-fundo); border-radius: 6px; box-sizing: border-box; } .campo-formulario input, .campo-formulario select, .campo-formulario textarea { width: 100%; max-width: 240px; padding: 10px; border: 1px solid var(--cor-borda); border-radius: 6px; font-family: var(--fonte-principal); font-size: 14px; color: var(--cor-texto); background-color: #fff; box-sizing: border-box; } .campo-formulario textarea { max-width: none; } /* Campo numérico com unidade fixa ao lado (ex.: Área construída → "m²") — a unidade nunca é digitável, só um rótulo mostrado colado no campo (pedido da Thais 2026-08-28: o campo em si só aceita número). */ .campo-sufixo-wrap { display: flex; align-items: center; gap: var(--espaco-sm); max-width: 240px; } .campo-sufixo-wrap input { max-width: none; } .campo-sufixo { font-size: 13px; color: var(--cor-texto-secundario); white-space: nowrap; } /* Campo de checkbox solto (ex.: "Incluir no contrato") — o quadradinho nu ficava dentro da mesma caixa de campo de texto (largura 100%, padding 10px), então sobrava um retângulo grande e vazio com um checkbox minúsculo perdido lá dentro, sem nada ao lado ancorando (pedido da Thais 2026-08-28: "parece que ficam soltos"). Vira um cartão compacto com o rótulo do lado do quadradinho (não mais em cima) e destaque em laranja quando marcado — mesma convenção do resto do sistema (azul = padrão, laranja = destaque).*/ /* Escolha múltipla como etiquetas clicáveis (ex.: Categorias da pessoa no Jurídico, 26/09). Checkbox de verdade por baixo, só o visual muda. */ .opcoes-etiqueta { display: flex; flex-wrap: wrap; gap: var(--espaco-sm); margin: 0; padding: 0; border: 0; } .opcoes-etiqueta legend { width: 100%; padding: 0; margin-bottom: var(--espaco-sm); font-size: 13px; font-weight: 500; color: var(--cor-texto); } .opcao-etiqueta { position: relative; display: inline-flex; } .opcao-etiqueta input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .opcao-etiqueta span { font-size: 13px; padding: 5px var(--espaco-md); border: 1px solid var(--cor-borda); border-radius: 999px; background-color: #fff; color: var(--cor-texto-secundario); transition: border-color .15s ease, color .15s ease, background-color .15s ease; } .opcao-etiqueta input:checked + span { border-color: var(--cor-primaria); color: var(--cor-primaria); background-color: var(--cor-fundo-alternado); } .opcao-etiqueta input:checked + span::before { content: "✓ "; } .opcao-etiqueta input:focus-visible + span { outline: 2px solid var(--cor-primaria-clara); outline-offset: 1px; } .campo-formulario:has(> input[type="checkbox"]) { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: var(--espaco-sm); padding: 9px var(--espaco-md); background-color: #fff; border: 1px solid var(--cor-borda); border-radius: 6px; } .campo-formulario:has(> input[type="checkbox"]:checked) { border-color: var(--cor-secundaria); background-color: var(--cor-secundaria-mais-clara); } .campo-formulario:has(> input[type="checkbox"]) label { display: inline; min-height: 0; margin-bottom: 0; font-size: 14px; font-weight: 500; color: var(--cor-texto); cursor: pointer; } .campo-formulario input[type="checkbox"] { width: 18px; height: 18px; max-width: none; padding: 0; border-radius: 4px; accent-color: var(--cor-secundaria); cursor: pointer; flex-shrink: 0; } /* Seleção de taxas (caixa-dropdown) */ .campo-taxas-dropdown { position: relative; } .caixa-seletor-taxas { width: 100%; max-width: 240px; padding: 10px; border: 1px solid var(--cor-borda); border-radius: 6px; font-family: var(--fonte-principal); font-size: 14px; color: var(--cor-texto); background-color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-sm); box-sizing: border-box; } .caixa-seletor-taxas.aberta { border-color: var(--cor-primaria); } .texto-resumo-taxas { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .texto-resumo-taxas.vazio { color: #a7b0c0; } .seta-taxas { font-size: 10px; color: var(--cor-texto-secundario); transition: transform 0.15s ease; flex-shrink: 0; } .caixa-seletor-taxas.aberta .seta-taxas { transform: rotate(180deg); } .painel-opcoes-taxas { position: absolute; top: calc(100% + 6px); left: 0; width: max(100%, 260px); background: #fff; border: 1px solid var(--cor-borda); border-radius: 8px; box-shadow: 0 6px 20px rgba(20, 30, 60, 0.12); padding: var(--espaco-sm); z-index: 20; display: none; } .painel-opcoes-taxas.aberto { display: block; } .campo-taxas-dropdown .opcao-taxa { display: flex; align-items: flex-start; gap: 10px; padding: var(--espaco-sm); border-radius: 6px; font-size: 14px; font-weight: 400; color: var(--cor-texto); cursor: pointer; min-height: 0; margin: 0; } .campo-taxas-dropdown .opcao-taxa:hover { background: var(--cor-fundo-alternado); } .opcao-taxa input { margin: 2px 0 0; flex-shrink: 0; width: auto; max-width: none; } .titulo-taxa { flex: 1; min-width: 0; } .preco-taxa { margin-left: auto; color: var(--cor-texto-secundario); font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; flex-shrink: 0; padding-top: 1px; } .caixa-total-taxas { width: 100%; max-width: 240px; padding: 10px; border: 1px solid var(--cor-borda); border-radius: 6px; background-color: var(--cor-fundo-alternado); font-family: var(--fonte-principal); font-size: 14px; font-weight: 600; color: var(--cor-titulo); font-variant-numeric: tabular-nums; box-sizing: border-box; } /* Seleção múltipla genérica (filtros de categoria) — mesmo padrão visual do dropdown de taxas acima, sem preço/total, pra permitir marcar vários valores ao mesmo tempo num filtro. */ .campo-multisselecao { position: relative; } .caixa-seletor-multi { width: 100%; max-width: 240px; padding: 10px; border: 1px solid var(--cor-borda); border-radius: 6px; font-family: var(--fonte-principal); font-size: 14px; color: var(--cor-texto); background-color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-sm); box-sizing: border-box; } .caixa-seletor-multi.aberta { border-color: var(--cor-primaria); } .texto-resumo-multi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .texto-resumo-multi.vazio { color: #a7b0c0; } .seta-multi { font-size: 10px; color: var(--cor-texto-secundario); transition: transform 0.15s ease; flex-shrink: 0; } .caixa-seletor-multi.aberta .seta-multi { transform: rotate(180deg); } .painel-opcoes-multi { position: absolute; top: calc(100% + 6px); left: 0; width: max(100%, 220px); max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--cor-borda); border-radius: 8px; box-shadow: 0 6px 20px rgba(20, 30, 60, 0.12); padding: var(--espaco-xs); z-index: 20; display: none; } .painel-opcoes-multi.aberto { display: block; } .opcao-multi { display: flex; align-items: center; gap: 5px; padding: 1px 6px; border-radius: 6px; font-size: 11px; line-height: 1.25; font-weight: 400; color: var(--cor-texto); cursor: pointer; min-height: 0; margin: 0; } .opcao-multi:hover { background: var(--cor-fundo-alternado); } .opcao-multi input { margin: 0; flex-shrink: 0; width: 13px; height: 13px; max-width: none; } /* Barra de ações (Locação) */ .barra-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--cor-borda-leve); } .botao-acao { background-color: #fff; border: 1px solid var(--cor-borda); color: var(--cor-texto-secundario); border-radius: var(--raio-borda-cta); padding: 10px 18px; font-family: var(--fonte-principal); font-weight: 500; font-size: 14px; text-align: center; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-sm); /* Botão nunca deve quebrar o próprio texto em 2 linhas (achado real 2026-09-09: "Próxima →" da paginação — igual em Locação/Rescisão/ Vendas, mesmo botão — quebrava "Próxima" e "→" em linhas separadas numa janela estreita, ficando enorme e feio). */ white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .botao-acao:hover { background-color: var(--cor-fundo-alternado); border-color: var(--cor-primaria-clara); color: var(--cor-primaria); } /* Estado "selecionado" de um par/grupo de botões de apoio que alterna a visão da tela (ex.: Solicitações: individual × agrupado por pessoa). */ .botao-acao--ativo, .botao-acao--ativo:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); background-color: var(--cor-fundo-alternado); } /* Abas de uma área (ex.: Financeiro: Receitas e Despesas / Extrato / Solicitações) ou de situação de uma lista (Pendentes / Arquivadas / Todas). Visual que o Financeiro do Jurídico já usava inline; virou padrão 26/09. */ .abas { display: flex; flex-wrap: wrap; gap: var(--espaco-xs); margin-bottom: var(--espaco-lg); border-bottom: 1px solid var(--cor-borda); } .aba { padding: var(--espaco-sm) 14px; margin-bottom: -1px; font-size: 13px; font-weight: 600; color: var(--cor-texto-secundario); text-decoration: none; border-bottom: 2px solid transparent; } .aba:hover { color: var(--cor-primaria); } .aba--ativa { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); } .botao-acao .icone-botao { font-size: 15px; line-height: 1; } /* Excluir com texto — topo da tela de um registro e "Excluir selecionados". Padrão único aprovado 25/09 (antes eram ~10 visuais diferentes). */ .botao-acao--perigo { color: var(--cor-reprovado); } .botao-acao--perigo:hover { background-color: var(--cor-reprovado-mais-clara); border-color: var(--cor-reprovado); color: var(--cor-reprovado-escura); } .botao-acao[disabled] { opacity: .45; cursor: not-allowed; } /* Excluir só com ícone — linhas de tabela e itens dentro de um registro. Sempre com title/aria-label dizendo o que apaga ("Excluir comentário"). */ .botao-excluir-icone { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: var(--raio-borda-cta); border: 1px solid transparent; background: transparent; color: var(--cor-reprovado); cursor: pointer; flex-shrink: 0; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; } .botao-excluir-icone:hover { background-color: var(--cor-reprovado-mais-clara); border-color: #f3c9c3; } .botao-excluir-icone .icone-svg { vertical-align: 0; } .botao-acao--somente-icone { width: 40px; height: 40px; padding: 0; flex-shrink: 0; } .selo-contagem { background: var(--cor-secundaria); color: var(--cor-titulo); /* 7:1 sobre o laranja; branco dava 2,6:1 (auditoria 25/10) */ font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; } /* Layout com barra lateral (navegação da área, ex. Locação) — usado só dentro do block content da tela, não no
do base.html, porque a barra é específica da área (ver regra-navegacao-menu-topo: funcionalidades de área nunca vão no menu do topo, ficam na tela da própria área). */ .layout-com-lateral { display: flex; align-items: flex-start; gap: var(--espaco-xxl); } .barra-lateral-area { width: 180px; flex-shrink: 0; background: var(--cor-sombra); border: 1px solid var(--cor-sombra); border-radius: var(--raio-borda-bloco); padding: var(--espaco-lg) 10px; display: flex; flex-direction: column; gap: 2px; transition: width 0.15s ease; } .conteudo-com-lateral { flex: 1; min-width: 0; } .item-lateral { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px var(--espaco-md); border-radius: 8px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .78); text-decoration: none; background: none; border: none; border-left: 3px solid transparent; width: 100%; text-align: left; cursor: pointer; font-family: var(--fonte-principal); } .item-lateral:hover { background-color: rgba(255, 255, 255, .07); color: #fff; } .item-lateral--ativo, .item-lateral--ativo:hover { background-color: rgba(255, 121, 0, .18); border-left-color: var(--cor-secundaria); color: #fff; } .item-lateral span:first-child { display: flex; align-items: center; gap: 10px; } /* Menu lateral recolhível (pedido da Thais 21/09: "ocupar mais espaço na tela", pra todos os módulos que usam .barra-lateral-area). O HTML de cada módulo continua igual — quem separa o texto num .rotulo-item-lateral (pra poder esconder só ele) e gera um monograma pros itens sem ícone (caso do Jurídico, que não tem ícones no menu) é o script no fim de base.html; aqui só fica a aparência recolhida. */ .barra-lateral-area--recolhida { width: 52px; padding-left: 6px; padding-right: 6px; } .barra-lateral-area--recolhida .item-lateral { justify-content: center; padding-left: var(--espaco-sm); padding-right: var(--espaco-sm); } /* !important aqui de propósito: ".item-lateral span:first-child" (acima) é mais específica que essas regras por ter um seletor de elemento (span) a mais na conta de especificidade — sem isso, ela vence e o rótulo/monograma ficam sempre visíveis mesmo recolhido/expandido. */ .barra-lateral-area--recolhida .item-lateral > *:nth-child(n+2), .barra-lateral-area--recolhida .rotulo-item-lateral, .barra-lateral-area--recolhida .submenu-lateral, .barra-lateral-area--recolhida .seta-submenu-lateral { display: none !important; } .monograma-item-lateral { display: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0; } .barra-lateral-area--recolhida .monograma-item-lateral { display: inline-flex !important; } .botao-recolher-lateral { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 6px; } .icone-recolher-lateral { display: inline-flex; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; font-weight: 700; font-size: 13px; } .divisor-lateral { height: 1px; background: rgba(255, 255, 255, .12); margin: 10px var(--espaco-xs); } .submenu-lateral { display: flex; flex-direction: column; gap: 2px; } .item-lateral-sub { display: flex; align-items: center; gap: 10px; padding: var(--espaco-sm) var(--espaco-md) var(--espaco-sm) 30px; border-radius: 8px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .68); text-decoration: none; } .item-lateral-sub:hover { background-color: rgba(255, 255, 255, .07); color: #fff; } .item-lateral-sub--ativo, .item-lateral-sub--ativo:hover { background-color: rgba(255, 121, 0, .18); color: #fff; } /* Terceiro nível do menu lateral (ex.: Minutas Contratuais dentro do Console) - mesma linguagem visual do .item-lateral-sub, só mais recuado e com fonte um pouco menor, pra marcar a hierarquia. */ .item-lateral-sub-sub { display: flex; align-items: center; gap: var(--espaco-sm); padding: 7px var(--espaco-md) 7px 46px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .68); text-decoration: none; } .item-lateral-sub-sub:hover { background-color: rgba(255, 255, 255, .07); color: #fff; } .item-lateral-sub-sub .icone-svg { width: 13px; height: 13px; } .seta-submenu-lateral { font-size: 13px; transition: transform 0.15s ease; } .item-lateral[aria-expanded="true"] .seta-submenu-lateral { transform: rotate(180deg); } /* Rótulo de agrupamento dentro de um .submenu-lateral (ex.: "Negociação" / "Partes" dentro do menu do processo em Locação) — pra quando os subitens de um item expansível têm categorias próprias, sem precisar de mais um nível de menu. */ .rotulo-grupo-lateral { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #C2793D; padding: var(--espaco-md) var(--espaco-md) var(--espaco-xs) 30px; } /* Botão "abrir menu" no celular, pra barra lateral "longa" (ver .barra-lateral-area--longa abaixo) — escondido no desktop. */ .botao-abrir-lateral { display: none; } /* Ícone de linha (SVG), usado no lugar de emoji dentro de botões/textos. */ .icone-svg { width: 15px; height: 15px; flex-shrink: 0; vertical-align: -3px; } /* Sininho de notificações, barra superior */ .sino-notificacoes { position: relative; display: flex; align-items: center; } .sino-notificacoes button { background: none; border: none; color: #fff; cursor: pointer; padding: var(--espaco-xs); display: flex; align-items: center; position: relative; } .sino-notificacoes .icone-svg { width: 19px; height: 19px; } .sino-notificacoes .contador-notificacoes { position: absolute; top: -2px; right: -2px; background: var(--cor-secundaria); color: var(--cor-titulo); font-size: 10px; font-weight: 700; line-height: 1; padding: 2px var(--espaco-xs); border-radius: 999px; min-width: 14px; text-align: center; } .sino-notificacoes .painel-notificacoes { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 340px; max-height: 400px; overflow-y: auto; background: #fff; color: var(--cor-texto); border-radius: 10px; box-shadow: var(--sombra-navbar); z-index: 20; text-align: left; } .sino-notificacoes .painel-notificacoes.aberto { display: block; } .sino-notificacoes .painel-notificacoes__cabecalho { display: flex; align-items: center; justify-content: space-between; padding: var(--espaco-md) 14px; border-bottom: 1px solid #eee; font-size: 13px; font-weight: 600; color: var(--cor-titulo); } .sino-notificacoes .painel-notificacoes__cabecalho button { background: none; border: none; color: var(--cor-texto-secundario); font-size: 12px; font-weight: 500; cursor: pointer; padding: 0; } .sino-notificacoes .painel-notificacoes__vazio { padding: var(--espaco-xl) 14px; font-size: 13px; color: var(--cor-texto-secundario); } .sino-notificacoes .item-notificacao { display: flex; gap: 10px; align-items: flex-start; padding: var(--espaco-md) 14px; border-bottom: 1px solid #f2f2f2; font-size: 13px; } .sino-notificacoes .item-notificacao:last-child { border-bottom: none; } .sino-notificacoes .item-notificacao__titulo { font-weight: 600; color: var(--cor-titulo); margin-bottom: 2px; } .sino-notificacoes .item-notificacao__mensagem { color: var(--cor-texto); white-space: pre-line; } .sino-notificacoes .item-notificacao__hora { color: var(--cor-texto-secundario); font-size: 11px; margin-top: var(--espaco-xs); } .sino-notificacoes .item-notificacao form { margin: 0; flex-shrink: 0; } .sino-notificacoes .item-notificacao button[type="submit"] { background: none; border: none; color: var(--cor-texto-secundario); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; } .sino-notificacoes .item-notificacao button[type="submit"]:hover { color: var(--cor-reprovado); } /* Ícone "Empresa" na barra superior (2026-09-09) — reúne itens que não são exclusivos de um módulo (Administradoras, Usuários, Diagnóstico, Relatório), antes espalhados dentro do console de Locação e invisíveis pra quem trabalha só em Rescisão/Vendas. Mesmo padrão visual do .sino-notificacoes acima. */ .painel-empresa-topo { position: relative; display: flex; align-items: center; } /* Botão em pílula, mesmo padrão do .seletor-papel__botao ao lado — o ícone sozinho (2026-09-09) era pequeno demais e genérico demais pra identificar sem passar o mouse; texto "Empresa" resolve isso. */ .painel-empresa-topo > button { display: flex; align-items: center; gap: var(--espaco-sm); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; font: inherit; font-size: 13px; font-weight: 500; padding: 6px var(--espaco-md) 6px 10px; border-radius: 999px; cursor: pointer; } .painel-empresa-topo > button:hover { background: rgba(255, 255, 255, 0.22); } .painel-empresa-topo .icone-svg { width: 17px; height: 17px; } .painel-empresa { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 230px; background: #fff; color: var(--cor-texto); border-radius: 10px; box-shadow: var(--sombra-navbar); padding: 6px; z-index: 20; text-align: left; } .painel-empresa.aberto { display: block; } .item-painel-empresa { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; border: none; background: none; color: var(--cor-texto); font-size: 13.5px; font-family: inherit; text-decoration: none; cursor: pointer; } .item-painel-empresa:hover { background-color: var(--cor-fundo-alternado); color: var(--cor-primaria); } .item-painel-empresa .seta-submenu-lateral { margin-left: auto; } .submenu-painel-empresa { display: flex; flex-direction: column; gap: 2px; } .item-painel-empresa-sub { display: block; padding: var(--espaco-sm) 10px var(--espaco-sm) 30px; border-radius: 8px; font-size: 13px; color: var(--cor-texto); text-decoration: none; } .item-painel-empresa-sub:hover { background-color: var(--cor-fundo-alternado); color: var(--cor-primaria); } .divisor-painel-empresa { height: 1px; background: var(--cor-borda-leve); margin: 6px var(--espaco-xs); } /* Rótulo do módulo atual + seletor de módulo em grade, no cabeçalho (opção escolhida pela Thais 23/09 entre 4 mockups: em vez de todos os módulos soltos numa lista que quebra linha, a barra mostra só o módulo atual e o ícone de grade abre um painel com todos pra escolher). Reaproveita o ícone que antes só linkava pra "home" sem funcionar como seletor de verdade. */ .rotulo-modulo-atual { color: #fff; font-size: 14px; font-weight: 600; } .seletor-modulo-topo { position: relative; display: flex; align-items: center; margin-right: auto; } .seletor-modulo-topo > button { display: flex; align-items: center; gap: var(--espaco-sm); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; font: inherit; font-size: 13px; font-weight: 500; padding: 6px var(--espaco-md) 6px 10px; border-radius: 999px; cursor: pointer; } .seletor-modulo-topo > button:hover { background: rgba(255, 255, 255, 0.22); } .grade-modulos { display: none; position: absolute; top: calc(100% + 10px); left: 0; width: 340px; background: #fff; border-radius: 12px; box-shadow: var(--sombra-navbar); padding: var(--espaco-md); z-index: 20; text-align: left; grid-template-columns: repeat(3, 1fr); gap: 6px; } .grade-modulos.aberto { display: grid; } .item-modulo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--cor-texto); padding: var(--espaco-md) var(--espaco-xs); border-radius: 10px; text-align: center; font-size: 12px; font-weight: 500; } .item-modulo:not(.item-modulo--indisponivel):hover { background-color: var(--cor-fundo-alternado); } .item-modulo.atual { color: var(--cor-secundaria-texto); } .item-modulo--indisponivel { color: var(--cor-cinza-medio); cursor: default; } .icone-modulo { width: 34px; height: 34px; border-radius: 9px; background: var(--cor-primaria); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } .item-modulo.atual .icone-modulo { background: var(--cor-secundaria); } /* Ícone do módulo no lugar das iniciais (Thais 27/09/2026) */ .icone-modulo .icone-svg { width: 18px; height: 18px; } .item-modulo--indisponivel .icone-modulo { background: var(--cor-cinza-claro); color: var(--cor-cinza-medio); } /* Seletor de papel no topo (pedido da Thais, 2026-08-21) — só aparece pra quem tem mais de um vínculo (ver request.membros_disponiveis, TenantMiddleware). Bolinha laranja (cor de destaque, ver identidade visual) sinaliza "isso é uma escolha sua, dá pra trocar". */ .seletor-papel { position: relative; } .seletor-papel__botao { display: flex; align-items: center; gap: var(--espaco-sm); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; font: inherit; font-size: 13px; font-weight: 500; padding: 6px 10px 6px var(--espaco-md); border-radius: 999px; cursor: pointer; } .seletor-papel__botao:hover { background: rgba(255, 255, 255, 0.22); } .seletor-papel__bolinha { width: 7px; height: 7px; border-radius: 50%; background: var(--cor-secundaria); flex: none; } .seletor-papel__seta { opacity: 0.85; font-size: 10px; } .seletor-papel__menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border-radius: 10px; box-shadow: var(--sombra-navbar); min-width: 220px; padding: 6px; z-index: 20; text-align: left; } .seletor-papel__menu.aberto { display: block; } .seletor-papel__legenda { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cor-texto-secundario); padding: var(--espaco-sm) 10px var(--espaco-xs); } .seletor-papel__item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: none; text-align: left; padding: 9px 10px; border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--cor-texto); cursor: pointer; } .seletor-papel__item:hover { background: var(--cor-fundo); } .seletor-papel__item.ativo { background: var(--cor-secundaria-mais-clara); color: #7a3d00; font-weight: 600; } .seletor-papel__check { color: var(--cor-secundaria-texto); font-weight: 700; font-size: 13px; } /* Tabela de processos — padding/borda base movidos pra cá 24/09 (antes repetidos por célula via style="" em cada template que usa essa tabela — mesma limpeza de duplicação já feita em .tabela-lista). As variantes .tabela-compacta/tabela-super-compacta/tabela-ultra-compacta continuam sobrescrevendo com !important. */ .tabela-processos { width: 100%; border-collapse: collapse; } .tabela-processos thead tr { text-align: left; border-bottom: 1px solid var(--cor-borda-leve); } .tabela-processos th, .tabela-processos td { padding: 10px; } .tabela-processos tbody tr { border-bottom: 1px solid var(--cor-borda-leve); } .tabela-processos th a { color: var(--cor-texto-secundario); text-decoration: none; font-weight: 600; } .tabela-processos th a:hover { color: var(--cor-primaria); } .alca-redimensionar-coluna { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 5; user-select: none; } .alca-redimensionar-coluna:hover, .alca-redimensionar-coluna.redimensionando { background: var(--cor-primaria-clara); opacity: 0.6; } /* min-width == max-width de propósito: cada coluna precisa reservar sempre a mesma largura, senão a largura "natural" da tabela varia conforme o comprimento do texto de cada linha (célula com texto curto ocupa menos espaço que uma com texto longo). Como a densidade automática (ver JS em lista_processos.html) decide o tamanho da fonte medindo essa largura natural, uma largura variável fazia a fonte mudar sozinha ao trocar a ordenação/paginação — trocar de página muda quais linhas aparecem, não a quantidade de colunas, então a largura não devia mudar por causa disso. */ .celula-tabela { min-width: 220px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Status tem rótulos mais longos ("Aguardando finalização de assinaturas") — ganha um limite maior que as outras colunas pra não cortar o texto. */ .celula-campo-status { min-width: 300px; max-width: 300px; } /* Densidade automática: quanto mais colunas escolhidas (ou menos espaço a tabela tiver na tela), menor a fonte/espaçamento, pra caber sem precisar de rolagem horizontal. As classes tabela-compacta/tabela-super-compacta/tabela-ultra-compacta são calculadas no servidor pela quantidade de colunas, mas também podem ser aplicadas/escaladas no navegador (ver script em lista_processos.html) se mesmo assim não couber na tela do usuário. */ .tabela-compacta th, .tabela-compacta td { font-size: 13px; padding: 7px !important; } .tabela-compacta .celula-tabela { min-width: 160px; max-width: 160px; } .tabela-compacta .celula-campo-status { min-width: 260px; max-width: 260px; } .tabela-compacta .badge-status { font-size: 12px; padding: 3px 9px; } .tabela-super-compacta th, .tabela-super-compacta td { font-size: 12px; padding: 5px !important; } .tabela-super-compacta .celula-tabela { min-width: 130px; max-width: 130px; } .tabela-super-compacta .celula-campo-status { min-width: 240px; max-width: 240px; } .tabela-super-compacta .badge-status { font-size: 11px; padding: 2px 7px; } .tabela-ultra-compacta th, .tabela-ultra-compacta td { font-size: 11px; padding: var(--espaco-xs) !important; } .tabela-ultra-compacta .celula-tabela { min-width: 100px; max-width: 100px; } .tabela-ultra-compacta .celula-campo-status { min-width: 210px; max-width: 210px; } .tabela-ultra-compacta .badge-status { font-size: 10px; padding: 2px 6px; } .botao-icone { background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; padding: var(--espaco-xs); text-decoration: none; } /* Aviso de limite de chamadas à D4Sign (item 33 do Raio-X do ONE) — usado no Diagnóstico e na tela de envio de assinatura digital. */ .diag-limite { margin-top: var(--espaco-lg); padding: 14px var(--espaco-lg); border-radius: 8px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-md); } .diag-limite.diag-limite--ok { background: var(--cor-fundo-alternado); color: var(--cor-texto-secundario); } .diag-limite.diag-limite--perto { background: var(--cor-secundaria-mais-clara); color: var(--cor-secundaria-texto); } /* Indicador de carregamento em ações demoradas (item 19 do Raio-X do ONE) — aplicado automaticamente pelo script global em base.html. */ .botao-carregando { cursor: wait !important; opacity: 0.75; padding-left: 34px !important; position: relative; } .botao-carregando::before { animation: girar-carregando 0.7s linear infinite; border: 2px solid currentColor; border-radius: 50%; border-right-color: transparent; border-top-color: transparent; content: ""; height: 14px; left: 12px; opacity: 0.85; position: absolute; top: 50%; transform: translateY(-50%); width: 14px; } @keyframes girar-carregando { to { transform: translateY(-50%) rotate(360deg); } } .link-menu-topo { color: #fff; text-decoration: none; font-weight: 500; font-size: 15px; } /* ---------- Responsivo (mobile first, 2026-08-21) ---------- Ponto de partida: acesso de corretores ao ONE (Pipeline, Visão Geral, Detalhes da Negociação) também precisa funcionar bem no celular, já que é assim que eles costumam abrir o sistema. Visão Geral/Detalhes da Negociação já tinham um shell responsivo próprio (_shell_processo.html, 2026-08-15); esta seção cobre o cabeçalho global (usado em toda tela, inclusive Pipeline) e o layout de barra lateral mais antigo do Pipeline (.layout-com-lateral), que não tinha nenhum ajuste ainda. Um breakpoint só (640px) — o app não tem uma faixa "tablet" distinta hoje. */ @media (max-width: 640px) { .cabecalho-topo-base { justify-content: flex-start; } .nav-topo-base ul { gap: 14px !important; font-size: 13px; } .info-usuario-topo { width: 100%; justify-content: space-between !important; } /* Nome completo do usuário ocupa a linha inteira num nome longo — some no celular (o "Sair" e o sino continuam); tela estreita já mostra o usuário logado noutro lugar quando precisa (ex. cabeçalho da marca). */ .info-usuario-topo > span { display: none; } .layout-com-lateral { display: block; } .barra-lateral-area { width: 100%; margin-bottom: 14px; } /* A barra lateral do Pipeline fica sempre visível no celular (ao contrário do menu do processo em _shell_processo.html) — pro corretor ela já é curta (só "Pipeline"), e pra quem tem acesso completo, empilhada faz mais sentido que escondida atrás de um botão extra numa tela que é a porta de entrada do sistema. */ .conteudo-com-lateral { min-width: 0; } /* Recolher não ajuda no celular (a barra já fica empilhada em largura total, ver comentário acima) — esconde o botão em vez de deixar um clique que não muda nada visível. */ .botao-recolher-lateral { display: none; } /* Barra lateral "longa" (ex. menu do processo em Locação, com 10+ abas) — ao contrário da barra curta do Pipeline (sempre empilhada visível, ver acima), essa ficaria pesada demais empilhada por padrão. Some no celular até clicar em .botao-abrir-lateral. Modificador pra qualquer barra lateral futura com o mesmo problema, não só a do processo (24/09). */ .barra-lateral-area--longa { display: none; } .barra-lateral-area--longa.barra-lateral-area--aberta { display: flex; } .botao-abrir-lateral { display: flex; align-items: center; gap: var(--espaco-sm); width: 100%; margin-bottom: 14px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--cor-borda); background: #fff; color: var(--cor-titulo); font-size: 13.5px; font-weight: 600; font-family: var(--fonte-principal); cursor: pointer; } .cartao { padding: 14px var(--espaco-lg); } } /* Bloco "Atualização do processo" — componente único (templates/componentes/atualizacao_processo.html), usado na Visão Geral de Locação, Rescisão e Vendas. Antes eram 3 cópias com