/* --- Projetos: banner, busca, modo de exibição e lista ------------------ */ /* --- Projeto aberto: banner com capa, trilha de etapas e painéis -------- */ /* .pr-banner não precisa mais de padding próprio: é o do padrão. */ .pr-banner .cfg-tile svg { width: 26px; height: 26px; } .pr-titulo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .pr-banner .pj-acoes button svg { width: 16px; height: 16px; flex: none; } .pr-banner .pj-acoes button:disabled { opacity: .45; cursor: not-allowed; } /* Trilha: diz o que já foi feito e onde retomar. Clicar leva à etapa. */ .pr-trilha { margin-top: var(--s4); margin-bottom: 0; padding: 16px 20px; border-radius: 12px; } /* Situação do trabalho: concluir/reabrir. Fecha a trilha de etapas — o marco que vem depois de tudo. */ .pr-conc { margin-top: var(--s4); display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-radius: 12px; } .pr-conc-ico { width: 44px; height: 44px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; } .pr-conc-ico svg { width: 24px; height: 24px; } .pr-conc.aberto .pr-conc-ico { background: var(--sel-bg); color: var(--orange); } .pr-conc.feito .pr-conc-ico { background: #e6f4ea; color: var(--good); } .pr-conc-txt { flex: 1; min-width: 0; } .pr-conc-txt b { display: block; font-size: 14px; color: var(--ink); } .pr-conc-txt span { font-size: 12.5px; color: var(--ink-3); } /* Um SVG sem width/height é desenhado em 300×150px pelo navegador — foi o que deformou este botão. Tamanho fixo aqui é cinto de segurança. */ .pr-conc-btn { flex: none; height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; } .pr-conc-btn svg { width: 16px; height: 16px; flex: none; } .pr-conc-reabrir { flex: none; height: 32px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-2); font-weight: 600; font-size: 12.5px; cursor: pointer; } .pr-conc-reabrir:hover { border-color: var(--ink-3); color: var(--ink); } .etapas { display: flex; align-items: center; } .etapa { flex: 1; display: flex; align-items: center; gap: 10px; height: auto; padding: 8px 10px; border: 0 !important; background: none !important; border-radius: 9px; text-align: left; min-width: 0; } .etapa:hover { background: var(--surface-2) !important; } .et-num { width: 27px; height: 27px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; background: var(--hair); color: var(--ink-3); } .et-num svg { width: 15px; height: 15px; } .etapa.ok .et-num { background: var(--good); color: #fff; } .etapa.agora .et-num { background: var(--orange); color: #fff; } .et-txt { min-width: 0; } .et-txt b { display: block; font-size: 12.5px; color: var(--ink); font-weight: 600; } .et-txt small { display: block; font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .etapa.agora .et-txt small { color: var(--orange); font-weight: 600; } /* O fio ligava as etapas com `flex: 1` e disputava largura de igual para igual com o TEXTO delas: metade da trilha era linha vazia, e "modelo pronto · 192.8 MB" saía cortado em "192…". Ele passa a ter um comprimento próprio e só encolhe se faltar espaço — quem cresce é o texto, que é o que informa. */ .et-linha { height: 2px; background: var(--hair); flex: 0 1 56px; min-width: 12px; } .et-linha.ok { background: var(--good); } @media (max-width: 1100px) { .etapas { flex-wrap: wrap; gap: 8px; } .et-linha { display: none; } .etapa { flex: 1 1 46%; } } .pr-grid { margin-top: var(--s4); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .campos.pr-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .campos.pr-campos3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* ---- Conta: cor e presença ------------------------------------------- A tela era um formulário longo em cinza; ganhou marcas de cor por seção, zonas de envio com convite visível e um cartão de segurança que muda de cor conforme a senha esteja ativa ou não. */ #detalhe .cta-grid .bloco { position: relative; } /* Zonas de logo/assinatura: convite, não caixa vazia. */ .cta-drop { background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); border-color: #cdd7e6; } .cta-drop:hover { background: var(--sel-bg); border-color: var(--orange); box-shadow: var(--anel-foco); } .cta-drop b { color: var(--navy-2); } /* Prévia: papel sobre mesa, como o documento sai. */ .cta-previa { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 2px 10px rgba(19,31,51,.07); padding: 16px 18px; } /* Pontos de controle: o bloco nunca teve estilo e os botões saíam colados no texto. Agora é um cartão com respiro, e as ações ficam à direita. */ /* A DICA DE ZONA UTM — item 287. Ela fica COLADA no campo, e não numa barra de avisos: é uma pista sobre aquele seletor, e pista longe do campo não é lida. */ .epsg-dica { margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: var(--fraco); } .epsg-dica b { color: var(--ink); } .epsg-usar { border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: 7px; padding: 2px 9px; font: inherit; font-size: 11.5px; cursor: pointer; margin-left: 4px; } .epsg-usar:hover { background: var(--fundo); border-color: var(--orange); color: var(--orange); } .pr-gcp { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; margin-top: var(--s3); } .pr-gcp-txt { flex: 1; min-width: 190px; } .pr-gcp-txt b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 3px; } .pr-gcp-txt .vazio { font-size: 11.5px; line-height: 1.45; } .pr-gcp .acoes { flex: none; gap: 8px; } .pr-gcp .acoes button { height: 32px; padding: 0 12px; font-size: 12.5px; } /* Imagem do projeto no topo da coluna direita: a mesma vista que abre o documento. É presença visual — não um alvo de clique. */ .pr-cartao-capa { padding: 0 !important; overflow: hidden; } .pr-capa-grande { position: relative; aspect-ratio: 16 / 10; background: var(--navy-2); } .pr-capa-grande img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .pr-capa-grande .semcapa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 22px; text-align: center; color: rgba(255,255,255,.5); font-size: 12.5px; } .pr-capa-grande .semcapa svg { width: 34px; height: 34px; } .pr-capa-tipo { position: absolute; top: 10px; left: 10px; background: rgba(19,31,51,.72); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 8px; } .pr-numeros { display: flex; gap: 8px; } .pr-marcacoes { margin: 8px 0 0; font-size: 12px; line-height: 1.7; } .pr-marcacoes span { white-space: nowrap; } .pr-marcacoes i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; } .pr-numeros > div { flex: 1; background: var(--surface-2); border-radius: 9px; padding: 12px 8px; text-align: center; } .pr-numeros b { display: block; font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .pr-numeros small { font-size: 10.5px; color: var(--ink-3); } .pr-numeros .grave { background: var(--bad-bg); } .pr-numeros .grave b { color: var(--bad); } .pr-numeros .grave small { color: var(--bad); } .pr-linhas > div { display: flex; justify-content: space-between; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--hair); } .pr-linhas > div:last-child { border-bottom: 0; } .pr-linhas span { color: var(--ink-2); } .pr-linhas b { color: var(--ink-3); font-weight: 600; } .pr-linhas b.ok { color: var(--good); } .pr-pasta { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } .pr-pasta > span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); min-width: 0; } .pr-ico-pasta { width: 17px; height: 17px; color: var(--orange); flex: none; } .pr-opcoes { display: flex; flex-direction: column; gap: 6px; margin: var(--s3) 0; } .pr-opcao { justify-content: flex-start; text-align: left; height: 38px; } .pr-opcao.atual { border-color: var(--orange); background: var(--sel-bg); } .pr-opcao em { font-style: normal; color: var(--orange); font-size: 11px; margin-left: 6px; } .pj-acoes { display: flex; gap: 8px; flex: none; align-self: center; } .pj-novo { height: 38px; padding: 0 16px; } /* O PESO DO BANNER NAVY — ver o catálogo dos botões. Os `!important` são herança desta regra e ficam: sem eles, o `button` genérico (branco com borda) vence pela ordem, e era exatamente esse branco que aparecia no banner da Conta. */ .btn-navy { background: rgba(255,255,255,.09) !important; color: var(--tinta-esc-1) !important; border: 1px solid rgba(255,255,255,.16) !important; } .btn-navy:hover:not(:disabled) { background: rgba(255,255,255,.16) !important; color: #fff !important; } /* Recentes vive aqui, junto da ação principal, e não no menu lateral: é um atalho desta tela, não um destino. Do que era dele, sobrou só o ícone maior — o resto virou `.btn-navy` no item 361. */ .pj-recentes { height: 38px; padding: 0 15px; display: flex; align-items: center; gap: 8px; } .pj-recentes svg { width: 17px; height: 17px; flex: none; } .pj-ferramentas { display: flex; gap: 10px; align-items: center; margin: var(--s4) 0; } .pj-busca { flex: 1; display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 0 12px; height: 38px; } .pj-busca svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; } .pj-busca input { border: 0 !important; height: 38px; padding: 0; background: none; width: 100%; } .pj-busca input:focus { box-shadow: none !important; } .pj-busca:focus-within { border-color: var(--orange); } .pj-modo { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; flex: none; } /* Segmentado: por dentro os itens seguem o tamanho compacto (32px/12,5px); o raio menor é do item, o do grupo é o 9px do padrão. */ .pj-modo button { height: 32px; padding: 0 14px; font-size: 12.5px; border: 0 !important; background: none !important; color: var(--ink-2) !important; border-radius: 8px; } .pj-modo button.sel, .pj-modo button.sel:hover:not(:disabled) { background: var(--navy) !important; color: #fff !important; } /* Lista: mesmas colunas no cabeçalho e nas linhas — uma variável só evita que cabeçalho e conteúdo saiam de registro. */ /* chips do banner viram filtros clicáveis */ .cta-banner button.cta-chip { border: 1px solid transparent; cursor: pointer; height: auto; font: inherit; font-size: 11px; padding: 3px 11px; } .cta-banner button.cta-chip:hover { border-color: rgba(255,255,255,.28); } .cta-banner button.cta-chip.ativo { border-color: var(--orange); } .cta-chip.grave { background: #3a1414; color: #ff9b9b; } /* O CHIP DO QUE VEIO DO REVISOR — item 355, decidido por ele em 24/08/2026. Ele nasceu no item 222 e passou meses SEM REGRA: o chip de "4 comentarios" saia igual ao de "3 arquivos", e quem precisava notar nao notava. 🔴 E `grave` era a errada aqui, de proposito: a casa decidiu no 222 que AZUL e o que veio do revisor e VERMELHO e o que deu errado — comentario pendente nao e erro, e etapa que ainda nao aconteceu. ⚠️ E o azul NAO e o `#2f6fd6` do `.aprov.mudo`: aquele foi desenhado para fundo CLARO, e aqui o fundo e o banner navy. Segue a forma do vizinho vinho — tingido escuro com texto claro —, que e a que funciona sobre navy. Mesma licao do item 361: peso nao e universal, ele pressupoe o FUNDO. */ .cta-chip.alerta { background: #14294a; color: #9bc4ff; } /* anomalias na lista e no cartão: total em neutro, graves em vermelho */ .an-total { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .an-grave { margin-left: 5px; background: var(--bad-bg); color: var(--bad); border-radius: 8px; padding: 1px 6px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .an-zero { color: var(--ink-3); } .pj-anom { text-align: right; font-size: 12.5px; } .card-anom { display: inline-flex; align-items: center; } .pj-ord { display: flex; align-items: center; gap: 7px; flex: none; } .pj-ord label { margin: 0; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; } .pj-ord select { height: 38px; padding: 0 30px 0 11px; font-size: 12.5px; } /* o sentido da ordem por extenso: o triângulo sozinho não diz nada */ .pj-ord button { height: 38px; padding: 0 13px; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 7px; white-space: nowrap; } .pj-ord button i { font-style: normal; font-size: 10px; color: var(--orange); } /* Relatórios: linha com contexto, no espírito da lista de Projetos. */ .rel-ferramentas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: var(--s4) 0 0; } .rel-ferramentas input[type="search"] { max-width: 380px; } .rel-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; } /* Excluir na lista: discreto, e vermelho só ao passar o mouse — a ação existe mas não convida. */ .rel-excluir { color: var(--ink-3); } .rel-excluir:hover:not(:disabled) { color: var(--bad); border-color: var(--bad-bd); background: var(--bad-bg); } .rel-filtros button { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; display: inline-flex; align-items: center; gap: 7px; } .rel-filtros button i { font-style: normal; font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--ink-3); padding: 1px 7px; border-radius: 20px; } .rel-filtros button.ativo { background: var(--navy); color: #fff; border-color: var(--navy); } .rel-filtros button.ativo i { background: rgba(255,255,255,.16); color: #fff; } /* 🔴 AS DUAS ULTIMAS COLUNAS SAO `auto`, E NAO PIXEL FIXO — item 351, 24/08/2026. Ele desconfiou do mapa ("em Relatorios esta tudo em ordem? voce nao quer checar?") e a tela nunca tinha sido varrida. Medido NA PRODUCAO, com sessao efemera: a coluna das acoes tem 236px e os quatro botoes pedem **265px** — Abrir 61, Baixar 71, Projeto 77, lixeira 38, mais os vaos. Estoura 29px, e o que transborda cobre a DATA. ⚠️ A data nao estava cortada: `scrollWidth == clientWidth`. Ela estava SENDO COBERTA, que e outro defeito e pede outro conserto — largura fixa nao adianta esticar. E o numero muda de maquina: aqui os mesmos botoes medem 54/67/38 e cabem por 1px. Um layout que passa por 1px na maquina de quem escreve e quebra na de quem usa nao e "quase certo" — e frageis por construcao. `auto` faz as duas pedirem o que precisam; quem cede e o NOME do projeto, que tem reticencias e continua legivel. Data coberta perde a informacao. */ .rel-lista { --rel-cols: 62px minmax(0,1fr) 116px 82px auto auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--sh-1); margin-top: var(--s4); } .rel-linha { display: grid; grid-template-columns: var(--rel-cols); gap: 14px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--hair); } .rel-linha:last-child { border-bottom: 0; } .rel-linha:hover { background: var(--surface-2); } .rel-capa { width: 62px; height: 44px; border-radius: 8px; overflow: hidden; flex: none; background: var(--navy-2); display: flex; align-items: center; justify-content: center; position: relative; } .rel-capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rel-capa svg { width: 17px; height: 17px; color: rgba(255,255,255,.42); } .rel-id { min-width: 0; } .rel-nome { font-weight: 600; font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 8px; overflow: hidden; } .rel-nome > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rel-atual { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--good-bg); color: var(--good); padding: 2px 7px; border-radius: 20px; white-space: nowrap; flex: none; } .rel-antigo { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; background: var(--surface-2); color: var(--ink-3); padding: 2px 7px; border-radius: 20px; white-space: nowrap; flex: none; } .rel-sub { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } /* `nowrap` -- item 368. Sem ele, etiqueta que nao cabe na coluna de 116px QUEBRA em duas linhas e vira um bloco: foi o que aconteceu com "Comentarios da revisao", que media 42,1px de altura contra os 25 do selo ao lado. O texto encurtou, e esta linha e o que impede a proxima etiqueta longa de repetir o defeito em silencio. */ .rel-selo { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; display: inline-block; white-space: nowrap; } .rel-selo.laudo { background: var(--navy); color: #fff; } .rel-selo.relatorio { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); } /* O RELATORIO DE COMENTARIOS, item 203. Azul, que e a cor do que veio do revisor desde o item 222 — e aqui ela faz mais do que combinar: e o unico sinal, nesta lista, de que aquele PDF NAO vai ao cliente. Os dois documentos do mesmo projeto ficam lado a lado. */ .rel-selo.interno { background: var(--comentario); color: #fff; border: 1px solid var(--comentario); } .rel-arq { text-align: right; line-height: 1.3; } .rel-arq b { display: block; font-size: 11.5px; color: var(--ink-2); font-weight: 700; } .rel-arq span { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; } /* Arquivo que saiu do disco. Na cor de erro do tema, e não numa nova: documento que desapareceu é falha, não aviso — e o dono pode já ter entregado aquele PDF a um cliente. O peso em MB dá lugar à frase, porque não há o que pesar. */ .rel-arq span.rel-sumiu { color: var(--bad); font-weight: 600; font-variant-numeric: normal; } .rel-data { font-size: 12px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; } .rel-linha .rel-acoes { display: flex; gap: 6px; justify-content: flex-end; } .rel-linha .rel-acoes button { height: 32px; padding: 0 12px; font-size: 12.5px; } @media (max-width: 1280px) { /* Na janela estreita o tamanho do arquivo sai (`rel-arq`), e as duas ultimas seguem `auto` pela mesma razao de cima. */ .rel-lista { --rel-cols: 62px minmax(0,1fr) 116px auto auto; } .rel-arq { display: none; } } /* Equipe (Configurações): lista de usuários da conta. */ .us-papel { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; display: inline-block; width: fit-content; } /* Equipe: um cartão por pessoa, compacto o bastante para caber na coluna. */ .eq-cota { font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--ink-3); padding: 2px 9px; border-radius: 20px; margin-left: 8px; font-variant-numeric: tabular-nums; } /* Uma linha por pessoa: avatar, nome, papel e as ações como ícones. Em cartão de três linhas, quatro usuários empurravam a coluna para 982px e esticavam as vizinhas. E-mail e último acesso ficam no title. */ /* GRADE, e nao coluna, desde o item 162. A Equipe deixou de dividir a linha com o Armazenamento (que foi para a Plataforma) e passou a ocupar a faixa inteira — 1406 px. Uma pessoa por linha ali deixaria ~1.000 px de vao entre o nome e os botoes de acao. `auto-fill` com minimo de 360 px poe duas a quatro pessoas por linha conforme a largura, e volta a uma coluna sozinha na tela estreita, sem media query. */ .eq-lista { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } /* Com a coluna inteira só para a Equipe, cabe mostrar quem é cada pessoa: nome, e-mail e último acesso. Foi compactado quando dividia espaço; agora não divide. */ .eq-item { display: grid; grid-template-columns: 34px minmax(0,1fr) auto auto; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; transition: border-color var(--t); } .eq-quem { min-width: 0; display: block; } .eq-quem small { display: block; font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eq-acesso { color: var(--tinta-esc-2) !important; } .eq-item:hover { border-color: var(--border-hover); } .eq-item.off { background: var(--surface-2); } .eq-item.off .eq-nome, .eq-item.off .eq-av { opacity: .5; } .eq-av { width: 34px; height: 34px; border-radius: 50%; background: var(--navy-2); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; align-self: start; } .eq-nome { display: block; font-size: 13px; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 1px; } .eq-acoes { display: flex; gap: 3px; align-self: start; } .eq-acoes button { width: 28px; height: 28px; padding: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); } .eq-acoes button svg { width: 14px; height: 14px; } .eq-acoes button:hover:not(:disabled) { color: var(--orange); border-color: var(--orange); } .us-papel { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; flex: none; text-transform: uppercase; letter-spacing: .04em; } .us-papel.adm { background: var(--navy); color: #fff; } .us-papel.insp { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); } /* Filtro por período: "mostrar concluídos neste mês". Discreto quando em 'qualquer data'; ganha fundo âmbar quando um recorte está ativo, para o usuário não esquecer que a lista está filtrada. */ .pj-filtrodata { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 var(--s4); padding: 8px 12px; border-radius: 9px; border: 1px solid transparent; } .pj-filtrodata.ativo { background: #fff8ef; border-color: #f3d9b5; } .pj-filtrodata .fd-rot { font-size: 12px; font-weight: 600; color: var(--ink-3); } .pj-filtrodata select { height: 32px; padding: 0 30px 0 11px; font-size: 12.5px; width: auto; } .pj-filtrodata .fd-intervalo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); } .pj-filtrodata .fd-intervalo input { height: 32px; width: auto; font-size: 12.5px; } .pj-filtrodata .fd-conta { font-size: 12px; color: var(--ink-2); font-weight: 600; margin-left: 4px; } .pj-filtrodata .fd-limpar { height: 30px; padding: 0 11px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-2); font-size: 12px; font-weight: 600; cursor: pointer; } .pj-filtrodata .fd-limpar:hover { border-color: var(--ink-3); color: var(--ink); } /* A penúltima coluna (92px) é a do "o que falta" — capa e documento. Entrou entre as datas e as ações porque é ali que o olho já está indo: a pergunta "posso entregar?" se responde ao lado de "quando foi o voo?". */ .pj-lista { --pj-cols: 56px minmax(0, 2fr) 104px minmax(0, 1.1fr) 118px 96px 76px 154px 92px 76px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--sh-1); } .pj-cab, .pj-linha { display: grid; grid-template-columns: var(--pj-cols); gap: 14px; align-items: center; } .pj-cab { padding: 0 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .pj-cab button { grid-column: auto; height: 38px; padding: 0; border: 0 !important; background: none !important; font: 700 10.5px var(--brand); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3) !important; text-align: left; display: flex; align-items: center; gap: 5px; } .pj-cab button:first-child { grid-column: 1 / 3; } /* miniatura + nome */ .pj-cab button:hover { color: var(--ink) !important; } .pj-cab button.ord { color: var(--navy) !important; } .pj-cab button i { font-style: normal; font-size: 10px; color: var(--orange); } /* Anomalias, Fotos e Criado em, alinhados à direita como os números que rotulam */ .pj-cab button:nth-child(5), .pj-cab button:nth-child(6) { justify-content: flex-end; } /* "Datas" acompanha a célula, que é centrada. */ .pj-cab button:nth-child(7) { justify-content: center; } /* `min-height` fixo: sem ele a linha crescia com o conteúdo da célula mais alta, e a coluna do "o que falta" varia de zero a dois crachás — medi 58, 59 e 60px na mesma lista. Numa tabela isso lê como linha torta. 60px é o caso mais alto (dois crachás), então nada é cortado. */ .pj-linha { padding: 10px 16px; cursor: pointer; transition: background .1s; border-bottom: 1px solid var(--hair); min-height: 60px; } .pj-linha:last-child { border-bottom: 0; } /* Zebra na lista de projetos, mesmo padrão das outras. O hover precisou escurecer: com a faixa em #f9fbfd e o hover em --surface-2 (var(--surface-2)) a linha sob o mouse ficava indistinguível nas ímpares. */ .pj-linha:nth-of-type(odd) { background: var(--zebra); } .pj-linha:hover { background: #e0e8f4; } .pj-capa { width: 56px; height: 38px; border-radius: 8px; overflow: hidden; flex: none; background: var(--navy-2); display: flex; align-items: center; justify-content: center; position: relative; } .pj-capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pj-capa svg { width: 18px; height: 18px; color: rgba(255,255,255,.42); } .pj-id { min-width: 0; } .pj-nome { font-weight: 600; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pj-sub { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; } /* Tipo em coluna própria, como selo — é o que separa fachada de telhado num relance e define o perfil de processamento. */ .pj-tipo { min-width: 0; } .pj-selo-tipo { display: inline-block; max-width: 100%; padding: 3px 9px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pj-cli { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pj-fotos { text-align: right; font-size: 12.5px; color: var(--ink-3); } .pj-fotos b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } /* Duas datas empilhadas numa coluna só: criação em cima, conclusão embaixo. Verde quando o trabalho fechou; "em andamento" quando não. */ .pj-datas { text-align: center; font-variant-numeric: tabular-nums; line-height: 1.35; white-space: nowrap; } /* cada data numa linha só */ .pj-datas .d1 { font-size: 13px; color: var(--ink-2); } .pj-datas .d2 { font-size: 12.5px; margin-top: 1px; } .pj-datas .d2.ok { color: var(--good); font-weight: 600; } .pj-datas .d2.aberto { color: var(--ink-3); } .pj-datas .rot { color: var(--ink-3); font-weight: 400; } /* A lixeira é um cartão de pasta: o estilo dela mora junto dos outros, no bloco injetado por `_cssPastas`. Aqui ficam só as peças da LISTA. */ .tr-nota { font-size: 11.5px; color: var(--ink-3); margin-left: 10px; } .pj-rapidas button.perigo:hover { color: var(--bad); border-color: var(--bad); }