/* PreservaCred — ficha de empresa do Explorador de CNPJ (pública + painel). Padrão: densidade de terminal financeiro com a clareza do design system. */ /* ============================== Faixa de indicadores (elemento certo por métrica) Grade de cartões alinhados: rótulo em cima · corpo no meio · sub embaixo, em linhas de posição FIXA — cards de conteúdos diferentes ficam alinhados. */ .indic-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); align-items: stretch; } /* O cartão de situação cadastral (o mais importante) ocupa mais largura e puxa a atenção primeiro. A faixa tem de 4 a 7 cartões ("Dívida total na RJ" e "Interesse recente" só aparecem quando há dado) — cada contagem tem seu template para a grade ficar sempre cheia, sem coluna órfã. */ @media (min-width: 720px) { .indic-row--7 { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr 1fr; } .indic-row--6 { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr; } .indic-row--5 { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } .indic-row--4 { grid-template-columns: 1.6fr 1fr 1fr 1fr; } } /* 5–7 KPIs viram 3 colunas em telas médias (evita tiles espremidos) */ @media (max-width: 1080px) and (min-width: 561px) { .indic-row--7, .indic-row--6, .indic-row--5 { grid-template-columns: repeat(3, 1fr); } } .indic { display: grid; grid-template-rows: auto 1fr auto; gap: var(--sp-2); background: var(--pc-bg-0); border: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--sp-4); min-width: 0; text-decoration: none; color: inherit; } .indic-link { transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); } .indic-link:hover { border-color: var(--pc-petrol-300); box-shadow: var(--shadow-2); transform: translateY(-1px); text-decoration: none; } .indic-rotulo { font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--pc-ink-400); line-height: 1.2; overflow-wrap: break-word; } .indic-corpo { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2); min-width: 0; } .indic-sub { font-size: var(--fs-xs); color: var(--pc-ink-400); line-height: 1.3; overflow-wrap: break-word; } /* -- semântica de cor por nível (variável local herdada pelos elementos) -- */ .ind-ok { --ind-c: var(--pc-success-600); --ind-bg: var(--pc-success-100); } /* aviso (RJ/RE) = âmbar/terracota, NÃO dourado — dourado é reservado a paywall/planos/premium (tokens.css). Corrige a colisão semântica do selo. */ .ind-warn { --ind-c: var(--pc-warning-700); --ind-bg: var(--pc-warning-100); } .ind-danger { --ind-c: var(--pc-danger-700); --ind-bg: var(--pc-danger-100); } .ind-info { --ind-c: var(--pc-info-600); --ind-bg: var(--pc-info-100); } .ind-neutral { --ind-c: var(--pc-ink-400); --ind-bg: var(--pc-bg-100); } /* (a) SELO — grande e inequívoco (situação de insolvência) */ .indic-destaque { border-left: 4px solid var(--ind-c); } .indic-selo { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; } .indic-selo-dot { width: 12px; height: 12px; border-radius: var(--r-full); flex: none; background: var(--ind-c); box-shadow: 0 0 0 4px var(--ind-bg); } .indic-selo-txt { font-weight: 750; font-size: var(--fs-h4); line-height: 1.15; color: var(--pc-ink-900); letter-spacing: -0.01em; overflow-wrap: break-word; } .indic-destaque .indic-selo-txt { color: var(--ind-c); } /* (b) BADGE com dot colorido (situação cadastral) */ .indic-badge { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 4px 10px; border-radius: var(--r-full); background: var(--ind-bg); color: var(--ind-c); font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; max-width: 100%; } .indic-badge-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--ind-c); flex: none; } /* (c) NÚMERO grande (porte, idade, interesse) */ .indic-numero { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .indic-num-v { font-weight: 750; font-size: var(--fs-h3); line-height: 1.05; color: var(--pc-ink-900); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .indic-num-sfx { font-size: var(--fs-sm); font-weight: 600; color: var(--pc-ink-500); letter-spacing: normal; } .indic-tend { font-size: var(--fs-body); font-weight: 700; line-height: 1; } .ind-tend-up { color: var(--pc-success-600); } .ind-tend-down { color: var(--pc-danger-600); } .ind-tend-flat { color: var(--pc-ink-300); } /* (d) SEMÁFORO (3 luzes) — disponível para métricas de estado triplo */ .indic-semaforo { display: inline-flex; gap: 5px; align-items: center; margin-bottom: 4px; } .indic-semaforo .sf { width: 11px; height: 11px; border-radius: var(--r-full); background: var(--pc-line-200); opacity: .35; } .indic-semaforo .sf.on { opacity: 1; } .indic-semaforo .sf-danger.on { background: var(--pc-danger-600); } .indic-semaforo .sf-warn.on { background: var(--pc-gold-600); } .indic-semaforo .sf-ok.on { background: var(--pc-success-600); } .indic-valor { font-weight: 700; font-size: var(--fs-body); color: var(--pc-ink-900); line-height: 1.2; } /* (e) BARRA — o único "medidor" que sobrou (gauge.php reencaminha para cá) */ .indic-barra { display: block; height: 6px; border-radius: var(--r-full); background: var(--pc-line-100); overflow: hidden; margin-top: 4px; } .indic-barra-fill { display: block; height: 100%; border-radius: var(--r-full); background: var(--ind-c); } /* ============================== Ícones de linha */ .icn { width: 16px; height: 16px; flex: none; color: var(--pc-petrol-500); vertical-align: -3px; } .icn-lg { width: 18px; height: 18px; } /* ============================== Cadastro RFB compacto (2 colunas com ícones) */ /* align-items:start impede o card mais curto de esticar (o buraco de ~90-120px no rodapé do card direito). Carimbo RFB ÚNICO ocupa a linha inteira embaixo. */ /* Row-gap = column-gap: quando a grade colapsa para 1 coluna (≤900px) os dois cards ficavam a 12px um do outro, apertados contra o respiro de 32px que separa as SEÇÕES — a hierarquia lia ao contrário. */ .rfb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; } .rfb-grid .rfb-stamp { grid-column: 1 / -1; margin-top: var(--sp-1); } @media (max-width: 900px) { .rfb-grid { grid-template-columns: 1fr; } } .info-list { list-style: none; padding: 0; margin: 0; } .info-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: var(--hairline); align-items: start; } .info-list li:last-child { border-bottom: 0; } .info-list .icn { margin-top: 2px; } .info-list .il-label { display: block; font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--pc-ink-400); margin-bottom: 1px; } .info-list .il-value { font-size: var(--fs-sm); color: var(--pc-ink-900); overflow-wrap: anywhere; } .info-list .il-value .mono { font-size: var(--fs-sm); } .info-list .il-note { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--pc-ink-500); line-height: 1.4; max-width: 52ch; } /* CNAEs secundários: disclosure nativo + carregamento lazy por CNPJ. O item ocupa as duas subcolunas para a lista abrir sem criar um "buraco" no bento. */ .info-list--2col > .info-list__cnae--expandable { grid-column: 1 / -1; } .cnae-secondary { margin-top: var(--sp-2); } .cnae-secondary > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 28px; color: var(--pc-petrol-600); font-size: var(--fs-xs); font-weight: 650; border-radius: var(--r-sm); } .cnae-secondary > summary::-webkit-details-marker { display: none; } .cnae-secondary > summary:hover > span:first-child { text-decoration: underline; } .cnae-secondary > summary:focus-visible { outline: none; box-shadow: var(--ring-focus); } .cnae-secondary__count { min-width: 22px; padding: 1px 7px; border-radius: var(--r-full); background: var(--pc-petrol-100); color: var(--pc-petrol-700); text-align: center; font-variant-numeric: tabular-nums; } .cnae-secondary__count[hidden] { display: none; } .cnae-secondary__chev { width: 7px; height: 7px; margin: -3px 2px 0 1px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--t-fast); } .cnae-secondary[open] .cnae-secondary__chev { margin-top: 3px; transform: rotate(225deg); } .cnae-secondary__state { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; padding: var(--sp-3); color: var(--pc-ink-500); font-size: var(--fs-xs); line-height: 1.45; background: var(--pc-bg-50); border: var(--hairline); border-radius: var(--r-md); } .cnae-secondary__state[hidden] { display: none; } html:not(.js) .cnae-secondary__state.is-loading { display: none; } .cnae-secondary__state.is-error { color: var(--pc-danger-700); } .cnae-secondary__spinner { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--pc-petrol-100); border-top-color: var(--pc-petrol-600); animation: cnae-secondary-spin .75s linear infinite; } @keyframes cnae-secondary-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .cnae-secondary__spinner { animation: none; border-top-color: var(--pc-petrol-100); } } .cnae-secondary__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); list-style: none; margin: var(--sp-2) 0 0; padding: var(--sp-3); background: var(--pc-bg-50); border: var(--hairline); border-radius: var(--r-md); } .cnae-secondary__list[hidden] { display: none; } .info-list .cnae-secondary__item { display: grid; grid-template-columns: minmax(68px, auto) minmax(0, 1fr); gap: var(--sp-2); align-items: baseline; padding: var(--sp-2); border: 0; border-radius: var(--r-sm); background: var(--pc-bg-0); } .cnae-secondary__item:only-child { grid-column: 1 / -1; } .cnae-secondary__code { color: var(--pc-petrol-700); font-size: var(--fs-xs); font-weight: 650; font-variant-numeric: tabular-nums; } .cnae-secondary__desc { color: var(--pc-ink-700); font-size: var(--fs-xs); line-height: 1.45; overflow-wrap: anywhere; } @media (max-width: 640px) { .cnae-secondary__list { grid-template-columns: 1fr; } .info-list .cnae-secondary__item { grid-template-columns: 1fr; gap: 2px; align-items: start; } } /* QSA + localização lado a lado */ .qsa-map-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--sp-5); align-items: start; } /* Sem QSA materializado: a Localização ocupa a linha inteira (a nota de sócios vira uma linha compacta dentro do card do mapa) — nada de card vazio 5/12. */ .qsa-map-grid--sem-qsa { grid-template-columns: 1fr; } @media (max-width: 900px) { .qsa-map-grid { grid-template-columns: 1fr; } } /* nota compacta de sócios (1 linha) ao pé do card de localização */ .qsa-note { display: flex; align-items: flex-start; gap: var(--sp-3); background: var(--pc-bg-50); border: 1px dashed var(--pc-line-200); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); color: var(--pc-ink-500); } .qsa-note .icn { color: var(--pc-ink-300); width: 18px; height: 18px; margin-top: 2px; } .qsa-note p { margin: 0; line-height: 1.5; } .qsa-note strong { color: var(--pc-ink-700); } .qsa-empty { display: flex; align-items: center; gap: var(--sp-3); background: var(--pc-bg-50); border: 1px dashed var(--pc-line-200); border-radius: var(--r-md); padding: var(--sp-4); font-size: var(--fs-sm); color: var(--pc-ink-500); } .qsa-empty .icn { color: var(--pc-ink-300); width: 20px; height: 20px; } /* Mini-mapa de localização da matriz */ .mini-map { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; } .mini-map .uf-mini { stroke: #FFFFFF; stroke-width: 1.4; stroke-linejoin: round; } .mini-map .uf-mini-label { font-family: var(--font-sans); font-size: 30px; font-weight: 700; fill: #FFFFFF; pointer-events: none; letter-spacing: .02em; } .map-caption { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--pc-ink-700); margin-top: var(--sp-3); text-align: center; } /* ============================== Cabeçalho de seção unificado (§2.2) O ícone vira coluna-âncora; h2 e sub compartilham a MESMA borda-esquerda de texto — acaba a "escada" de indentação. A tag ("Experimental"/"Parcial") senta na linha do h2 sem flutuar. */ .sec-head { display: grid; grid-template-columns: 24px 1fr auto; column-gap: var(--sp-3); align-items: center; } .sec-head .icn { grid-column: 1; grid-row: 1; width: 22px; height: 22px; color: var(--pc-petrol-600); } .sec-head h2 { grid-column: 2; grid-row: 1; margin: 0; } .sec-head .tag-inline, .sec-head .tip { grid-column: 3; grid-row: 1; align-self: center; } /* a .sec-sub vem FORA do .sec-head no markup, mas alinha ao mesmo x do h2. SEM teto de largura: o parágrafo de abertura ocupa o bloco, como o h2 acima dele. O `max-width: 72ch` que havia aqui não entregava o que prometia — `ch` é a largura do algarismo 0, e como o 0 é mais largo que a média das minúsculas, 72ch rendia 86 caracteres por linha (pico de 91), já acima da faixa de 45–75 que justifica a regra. Ficava largo demais para ser o ótimo tipográfico e estreito demais contra um card de ~1104px: parava na metade e lia como defeito. O recuo à esquerda fica — é ele que alinha com o título. */ .sec-sub { font-size: var(--fs-sm); color: var(--pc-ink-500); line-height: 1.6; margin-top: var(--sp-2); margin-left: calc(24px + var(--sp-3)); } /* cabeçalho compacto dos cards RFB (ícone + h2 pequeno, sem sub) */ .sec-head-sm { grid-template-columns: 22px 1fr; } .sec-head-sm .icn { width: 20px; height: 20px; } .sec-head-sm h2 { font-size: var(--fs-h4); } @media (max-width: 640px) { .sec-sub { margin-left: 0; } } /* Total consolidado do grupo, exibido uma vez no topo da seção de processos — torna o número do CTA rastreável sem somar subtotais mentalmente. */ .sec-consolidado { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-3); margin-left: calc(24px + var(--sp-3)); padding: var(--sp-3) var(--sp-4); background: var(--pc-petrol-50); border: var(--hairline); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--pc-ink-700); } @media (max-width: 640px) { .sec-consolidado { margin-left: 0; } } .sec-consolidado .icn { width: 18px; height: 18px; flex: none; color: var(--pc-petrol-600); margin-top: 1px; } .sec-consolidado strong { color: var(--pc-ink-900); } /* Nota (só quando há >1 grupo econômico entre os processos): explica que o total soma casos de grupos distintos, não de um único grupo consolidado. */ .sec-consolidado-nota { margin: var(--sp-2) 0 0; margin-left: calc(24px + var(--sp-3)); font-size: var(--fs-xs); color: var(--pc-ink-500); line-height: 1.5; } .sec-consolidado-nota strong { color: var(--pc-ink-700); } @media (max-width: 640px) { .sec-consolidado-nota { margin-left: 0; } } /* ============================== Processo expandível in-page */ .proc-acc { border: var(--hairline-strong); border-radius: var(--r-md); background: var(--pc-bg-0); margin-bottom: var(--sp-3); overflow: hidden; transition: border-color var(--t-base), box-shadow var(--t-base); } .proc-acc[open] { border-color: var(--pc-petrol-300); box-shadow: var(--shadow-2); } .proc-acc > summary { list-style: none; cursor: pointer; padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; gap: var(--sp-4); transition: background-color var(--t-fast); } .proc-acc > summary::-webkit-details-marker { display: none; } .proc-acc > summary:hover { background: var(--pc-petrol-50); } .proc-acc > summary:focus-visible { outline: none; box-shadow: var(--ring-focus) inset; } .proc-sum-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); } .proc-sum-main .mono { font-size: var(--fs-sm); color: var(--pc-ink-700); } .proc-sum-meta { font-size: var(--fs-sm); color: var(--pc-ink-500); white-space: nowrap; min-width: 0; } /* Em telas estreitas (iPhone SE/mini) a linha longa "processo de {grupo}" com nowrap estourava a borda do card e era cortada pelo clip do body (sem reticências, sem rolagem). O item já vive num flex-wrap com min-width:0, então permitir a quebra resolve sem estourar. */ @media (max-width: 420px) { .proc-sum-meta { white-space: normal; overflow-wrap: anywhere; max-width: 100%; } } .proc-sum-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--pc-petrol-800); font-size: var(--fs-sm); white-space: nowrap; } /* Rótulo da medida no sumário do processo — cada número diz o que é */ .proc-sum-val .psv-label { font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--pc-ink-400); } .proc-chevron { flex: none; width: 10px; height: 10px; border-right: 1.7px solid var(--pc-ink-400); border-bottom: 1.7px solid var(--pc-ink-400); transform: rotate(45deg) translateY(-2px); transition: transform var(--t-base); } .proc-acc[open] .proc-chevron { transform: rotate(225deg) translateY(-1px); } .proc-body { border-top: var(--hairline); padding: var(--sp-5); } .proc-acc[open] .proc-body { animation: pc-fade-up 340ms var(--ease-out) both; } .proc-body h4 { font-size: var(--fs-sm); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--pc-ink-500); margin: var(--sp-5) 0 var(--sp-3); } .proc-body h4:first-child { margin-top: 0; } /* ============================================================================ ESCALA DO BLOCO DE PROCESSO — quatro espécies, uma função cada. Rótulo e valor se distinguem por PESO e COR, nunca por caixa. CAIXA ALTA é DECISÃO e vive só em .pc-eyebrow (rótulo de FAIXA). Medido antes: 11 receitas de uppercase dentro de #processos, e o h4 de seção IDÊNTICO em 5/5 propriedades ao h4 do paywall (13px/650/uppercase/.78px/ink-500). Ritmo: 4px LIGA rótulo↔valor · 12px AGRUPA título↔conteúdo · 32px SEPARA seções. TUDO escopado em #processos: empresa.css também é a folha do PORTAL DO CLIENTE (PainelController → page_css 'empresa'), e client/empresa.php reusa .proc-body / .fact-grid / .fact / .f-label / .f-value com OUTRA estrutura. ========================================================================== */ #processos { --pc-t-secao: 1.0625rem; /* 17px */ --pc-t-rotulo: 0.75rem; /* 12px */ --pc-t-valor: 0.9375rem; /* 15px */ --pc-t-forte: 1.25rem; /* 20px — título de paywall / total */ --pc-t-nota: 0.6875rem; /* 11px */ --pc-r-liga: 4px; --pc-r-bloco: 12px; --pc-r-secao: 32px; } /* (1,1,1) — vence .proc-body h4 (0,1,1) e não toca o portal do cliente */ #processos .proc-body h4 { font-size: var(--pc-t-secao); font-weight: 700; letter-spacing: -.005em; text-transform: none; color: var(--pc-ink-900); line-height: 1.25; margin: var(--pc-r-secao) 0 var(--pc-r-bloco); padding-left: var(--sp-3); position: relative; } #processos .proc-body h4::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px; border-radius: 2px; background: var(--pc-petrol-500); } #processos .proc-body h4:first-child { margin-top: 0; } /* RÓTULO — receita única em todo o bloco, inclusive th de tabela */ #processos .pk-label, #processos .dl-rot, #processos .cc-nome, #processos .psv-label, #processos table.data th { font-size: var(--pc-t-rotulo); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--pc-ink-500); line-height: 1.3; } /* VALOR — o contraste com o rótulo é de peso (600→680) e cor (500→900) */ #processos .dl-val, #processos .val-list__txt { font-size: var(--pc-t-valor); font-weight: 680; color: var(--pc-ink-900); line-height: 1.4; } /* NOTA — nunca carrega preço nem oferta */ #processos .pk-stamp, #processos .pf-txt, #processos .dl-nota, #processos .stamp { font-size: var(--pc-t-nota); font-weight: 400; color: var(--pc-ink-400); letter-spacing: 0; line-height: 1.5; } /* A ÚNICA caixa alta sobrevivente — rótulo de FAIXA, nunca de campo */ .pc-eyebrow { display: block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--pc-petrol-700); margin: 0 0 var(--sp-3); } .pc-eyebrow--gold { color: var(--pc-gold-800); } /* ---- Dados-chave: LISTA DE DEFINIÇÃO de 2 colunas ----------------------- Substitui .fact-hero (3 células de 157,6px fixos: uma com ~88% de vazio e outra estourando com reticências). A proximidade rótulo↔valor passa a ser de COLUNA (24px horizontais), não de gap de 4px vertical. */ .dl-dados { margin: 0 0 var(--sp-2); background: var(--pc-bg-0); border: var(--hairline-strong); border-radius: var(--r-md); overflow: hidden; } .dl-linha { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); align-items: stretch; border-top: var(--hairline); } .dl-linha:first-child { border-top: 0; } .dl-linha > dt { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--pc-bg-50); border-right: var(--hairline); } .dl-ico { flex: none; line-height: 0; color: var(--pc-petrol-500); margin-top: 1px; } .dl-ico .icn { width: 16px; height: 16px; } .dl-linha > dd { margin: 0; padding: var(--sp-3) var(--sp-4); min-width: 0; } .dl-val { display: block; overflow-wrap: anywhere; } .dl-linha--num .dl-val { font-variant-numeric: tabular-nums; } /* As três linhas que o dono pediu com mais peso */ .dl-linha.is-destaque > dt, .dl-linha.is-destaque > dd { background: var(--pc-petrol-50); } .dl-linha.is-destaque > dt { border-right-color: var(--pc-petrol-200); } /* DIVERGÊNCIA do plano (especificidade): os modificadores vinham como `.dl-linha--forte .dl-val` (0,2,0) e PERDIAM para `#processos .dl-val` (1,1,0) da escala — MEDIDO: a observação saía 15px/680 (peso de dado) em vez de 15px/400 (peso de prosa), e o "forte" nunca crescia. Escopados, saem (1,2,0) e vencem. */ #processos .dl-linha--forte .dl-val { font-size: var(--fs-lead); font-weight: 700; } /* Observação é PROSA, não dado: peso de leitura */ #processos .dl-linha--prosa .dl-val { font-size: var(--fs-sm); font-weight: 400; color: var(--pc-ink-700); line-height: 1.6; max-width: 82ch; } .dl-nota { margin: var(--sp-2) 0 0; } @media (max-width: 560px) { .dl-linha { grid-template-columns: minmax(0, 1fr); } .dl-linha > dt { border-right: 0; border-bottom: var(--hairline); } } /* ---- Vários itens num campo: uma LINHA por item, numerada ---------------- MEDIDO: 62,4% dos processos com grupo_cnpjs têm 2+ CNPJs; 44 fichas exibiam o pipe "|" cru (8 admin_judicial + 36 escritório). */ /* fx-fonte__n e não ft__n: `ft_` é PREFIXO DE TABELA no guard de identificadores internos (PublicSourcePolicy::INTERNAL_IDENTIFIER_PATTERN), e o sanitize da publicação reescrevia o próprio atributo — a ficha pública saía com class="dados consolidados pela PreservaCred" e o estilo se perdia. Medido no HTML servido em 18/08, 2 ocorrências por ficha. */ .fx-fonte__n { display: inline-block; margin-bottom: var(--sp-2); font-size: var(--fs-xs); font-weight: 650; color: var(--pc-petrol-700); background: var(--pc-bg-0); border: 1px solid var(--pc-petrol-200); border-radius: var(--r-full); padding: 2px 9px; } .val-list { list-style: none; margin: 0; padding: 0; counter-reset: vl; } .val-list > li { display: flex; align-items: baseline; gap: var(--sp-2); padding: 5px 0; line-height: 1.4; overflow-wrap: anywhere; } .val-list > li + li { border-top: 1px dotted var(--pc-line-200); } .val-list > li::before { counter-increment: vl; content: counter(vl); flex: none; align-self: center; width: 17px; height: 17px; border-radius: var(--r-full); background: var(--pc-petrol-100); color: var(--pc-petrol-700); font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; } .val-list > li:only-child { padding: 0; } .val-list > li:only-child::before { content: none; } .val-list__txt a { color: var(--pc-petrol-700); font-weight: 680; } .val-list__sub { font-size: var(--fs-xs); font-weight: 400; color: var(--pc-ink-400); } /* (P3) Fatos-chave do processo — cards VERTICAIS como o print do dono: ícone-contorno no topo, label pequena, valor maior embaixo. Divisórias sutis entre colunas; fundo branco. */ .fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; background: var(--pc-bg-0); border: var(--hairline); border-radius: var(--r-md); overflow: hidden; } .fact-grid .fact { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--sp-3) var(--sp-4); border-left: var(--hairline); } .fact-grid .fact:first-child { border-left: 0; } .fact-grid .icn { color: var(--pc-petrol-500); width: 20px; height: 20px; margin-bottom: 2px; } .fact-grid .f-label { display: block; font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--pc-ink-400); } .fact-grid .f-value { display: block; font-size: var(--fs-body); font-weight: 600; color: var(--pc-ink-900); overflow-wrap: anywhere; } .fact-grid .fact-wide { grid-column: 1 / -1; } @media (max-width: 560px) { .fact-grid { grid-template-columns: 1fr; } .fact-grid .fact { border-left: 0; border-top: var(--hairline); } .fact-grid .fact:first-child { border-top: 0; } } /* Chips do quadro de credores por classe */ .classe-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .classe-chips .chip { height: auto; line-height: 1.5; padding: 3px 9px; } .classe-chips .chip small { color: inherit; opacity: .85; font-size: inherit; } /* Ações do processo (tribunal / painel) */ .proc-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--hairline); align-items: center; } .proc-actions .link-arrow { font-size: var(--fs-sm); } .proc-actions .ext-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--pc-petrol-600); } .proc-actions .ext-link:hover { color: var(--pc-petrol-700); text-decoration: none; } /* Processos além dos 5 expandíveis: linha compacta */ .proc-more { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; border: var(--hairline); border-radius: var(--r-md); background: var(--pc-bg-50); padding: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-3); font-size: var(--fs-sm); } /* Empty states da ficha: 3 linhas de texto centralizadas não pedem ~64px de respiro em cada ponta — menos rolagem vazia, mesma honestidade do vazio */ #processos .empty, #exposicao .empty, #interesse .empty, #comunidade .empty { padding-top: var(--sp-5); padding-bottom: var(--sp-5); } /* Paywall na ficha: nada atrás do overlay rola nem exibe scrollbar — a amostra bloqueada é decorativa (placeholders) e fica contida no card. O tbody vira a "tabela" interna a 100% (o display:block do table sozinho encolheria as linhas para a largura do conteúdo). */ .paywall-zone > .is-locked, .paywall-zone table.data.is-locked { display: block; overflow: hidden; max-width: 100%; } /* table-layout:fixed faz as células respeitarem os 100% do bloco: sem ele, o layout automático dimensiona a tabela pelo conteúdo dos placeholders e o scrollWidth estoura a caixa (corte visível no mobile). Com fixed, o texto mascarado quebra dentro da célula e o corte, se houver, é limpo. */ .paywall-zone table.data.is-locked tbody { display: table; width: 100%; table-layout: fixed; } .paywall-zone table.data.is-locked td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Mobile: sumário do processo empilha com respiro */ @media (max-width: 640px) { .proc-acc > summary { padding: var(--sp-3) var(--sp-4); } .proc-body { padding: var(--sp-4); } .indic-row { grid-template-columns: 1fr 1fr; } /* o selo de insolvência ocupa a linha inteira no mobile (o que mais importa) */ .indic-row > .indic-destaque { grid-column: 1 / -1; } /* Chips de classe: o texto quebra dentro do chip — nada é cortado seco na borda nem depende de scroll lateral para ser lido */ .classe-chips .chip { white-space: normal; max-width: 100%; } /* Paywall: o véu cobre o bloco bloqueado INTEIRO (não só os 240px finais) — nenhuma faixa de conteúdo mascarado aparece nítida acima do overlay */ .paywall-zone .paywall-fade { inset: 0; height: auto; background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, var(--pc-bg-0) 82%); } } @media (max-width: 420px) { .indic-row { grid-template-columns: 1fr; } } /* Tabelas empilhadas (mobile): a célula de valor quebra DENTRO do card — "R$ 100 mi – R$ 500 mi" nunca é truncado nem exige rolagem lateral */ @media (max-width: 768px) { table.data.responsive td { min-width: 0; } table.data.responsive td.num { white-space: normal; overflow-wrap: anywhere; } table.data.responsive td.num[data-label] { justify-content: space-between; } } /* Cabeçalho de seção no mobile: a tag desce para a 2ª linha (não espreme o h2) */ @media (max-width: 560px) { .sec-head { grid-template-columns: 24px 1fr; } .sec-head .tag-inline, .sec-head .tip { grid-column: 2; grid-row: 2; justify-self: start; margin-top: var(--sp-1); } } /* ============================== Status/atividade do processo (lista ordenada) */ /* Tag de status no sumário — o ATIVO recebe cor e pulso; o encerrado, discreto. */ .proc-tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; border: 1px solid transparent; } .proc-tag-recente { background: var(--pc-petrol-600); color: #fff; } .proc-tag-ok { background: var(--pc-success-100); color: var(--pc-success-700); border-color: var(--pc-success-600); } .proc-tag-warn { background: var(--pc-warning-100); color: var(--pc-warning-700); border-color: var(--pc-warning-600); } .proc-tag-danger { background: var(--pc-danger-100); color: var(--pc-danger-700); border-color: var(--pc-danger-600); } .proc-tag-neutral { background: var(--pc-bg-100); color: var(--pc-ink-500); border-color: var(--pc-line-200); } .proc-tag-pulse { width: 7px; height: 7px; border-radius: var(--r-full); background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: proc-pulse 2.4s var(--ease-out) infinite; } @keyframes proc-pulse { 0% { box-shadow: 0 0 0 0 rgba(24,105,116,.45); } 70% { box-shadow: 0 0 0 6px rgba(24,105,116,0); } 100% { box-shadow: 0 0 0 0 rgba(24,105,116,0); } } @media (prefers-reduced-motion: reduce) { .proc-tag-pulse { animation: none; } } /* Processo ATIVO: borda com acento à esquerda (destaque). Encerrado: apagado. */ .proc-ativo { border-left: 3px solid var(--pc-petrol-400); } .proc-recente.proc-ativo { border-left-color: var(--pc-petrol-600); } .proc-encerrado { opacity: .82; background: var(--pc-bg-50); } .proc-encerrado > summary .mono { color: var(--pc-ink-500); } .proc-encerrado[open] { opacity: 1; } /* ============================== Trilha de MARCOS acompanhados (fallback stepper) Só usada pelo
    de FALLBACK (quando partials/marcos.php não existe). Seletor ancorado em `ol.` de propósito: a
    do partial marcos.php NÃO deve herdar este display:flex — herdá-lo empurrava o rótulo (badge do tipo) para um gutter lateral flutuante no mobile (bug). */ ol.marcos-trilha { list-style: none; margin: 0 0 var(--sp-2); padding: var(--sp-2) 0 0; display: flex; gap: 0; overflow-x: auto; } ol.marcos-trilha .mk { position: relative; flex: 1 1 0; min-width: 92px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 0 4px; } /* linha conectora entre os passos */ ol.marcos-trilha .mk::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--pc-line-200); z-index: 0; } ol.marcos-trilha .mk:first-child::before { display: none; } ol.marcos-trilha .mk-dot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: var(--r-full); background: var(--pc-bg-0); border: 2px solid var(--pc-line-200); flex: none; } ol.marcos-trilha .mk-nome { font-size: var(--fs-xs); color: var(--pc-ink-400); line-height: 1.25; } /* passo já atingido */ ol.marcos-trilha .mk-feito .mk-dot { background: var(--pc-petrol-500); border-color: var(--pc-petrol-500); } ol.marcos-trilha .mk-feito::before { background: var(--pc-petrol-300); } ol.marcos-trilha .mk-feito .mk-nome { color: var(--pc-ink-700); } /* passo ATUAL — em destaque */ ol.marcos-trilha .mk-atual .mk-dot { background: var(--pc-petrol-600); border-color: var(--pc-petrol-600); box-shadow: 0 0 0 4px var(--pc-petrol-100); } ol.marcos-trilha .mk-atual::before { background: var(--pc-petrol-300); } ol.marcos-trilha .mk-atual .mk-nome { color: var(--pc-petrol-800); font-weight: 700; } /* ============================== Gráfico de interesse (60 dias, downdetector) */ .interesse-chart { border: var(--hairline); border-radius: var(--r-md); padding: var(--sp-3); background: var(--pc-bg-0); } .interesse-chart .ic-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); } .interesse-chart .ic-pico { font-size: var(--fs-xs); color: var(--pc-ink-400); font-variant-numeric: tabular-nums; } /* série de 60 dias rola lateralmente no mobile sem estourar a página */ .chart-scroll { overflow-x: auto; } .chart-scroll .chart-svg { min-width: 520px; } @media (min-width: 720px) { .chart-scroll .chart-svg { min-width: 0; } } /* O viewBox deste é 1440 de largura (metade da altura renderizada): com o min-width de 520px o gráfico ficaria de 72px e os rótulos ilegíveis. */ .interesse-chart .chart-scroll .chart-svg { min-width: 760px; } @media (min-width: 900px) { .interesse-chart .chart-scroll .chart-svg { min-width: 0; } } /* ============================== Nota de fonte/metodologia (rodapé da ficha) */ .ficha-nota { border-top: var(--hairline); margin-top: var(--sp-8); margin-bottom: var(--sp-8); padding-top: var(--sp-4); } .ficha-nota p { font-size: var(--fs-sm); color: var(--pc-ink-400); line-height: 1.5; margin: 0 0 var(--sp-2); } .ficha-nota p:last-child { margin-bottom: 0; } /* ============================== Ritmo vertical da ficha (§2.1) Só três saltos: intra-item 12px, título↔conteúdo 20px, entre-blocos 32px. .ficha-bloco padroniza o respiro entre grandes blocos. */ .ficha-bloco { margin-bottom: var(--sp-8); } @media (max-width: 640px) { .ficha-bloco { margin-bottom: var(--sp-6); } } /* Hero de identidade — respiro consistente, H1 que nunca estoura no estreito */ .ficha-hero { margin-bottom: var(--sp-8); } .ficha-hero h1 { overflow-wrap: anywhere; hyphens: auto; } .ficha-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); } /* ============================== Par de blocos numa linha (§2.4) "mais de um bloco por linha": resumo (interesse) + experimental (exposição). align-items:start impede o card curto de esticar. */ .ficha-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; } .ficha-par > * { margin-bottom: 0; } @media (max-width: 900px) { .ficha-par { grid-template-columns: 1fr; gap: var(--sp-6); } } /* ============================== Tabelas: nunca estouram o bloco (§2.6) .tbl-scroll é a rede de segurança (rola DENTRO do card; o corpo da página nunca rola na horizontal). table-layout fixed + faixa que quebra. */ .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } #processos table.data.responsive, #exposicao table.data.responsive { table-layout: fixed; width: 100%; } #processos table.data.responsive td, #exposicao table.data.responsive td { overflow-wrap: anywhere; } /* Razão social LONGA quebra dentro da própria coluna. .link-arrow é inline-flex + white-space:nowrap (para a seta deslizar colada ao texto), e nowrap num table-layout:fixed não alarga a coluna — o nome simplesmente transbordava por cima da coluna vizinha ("Tipo / UF"). Dentro de tabela quem manda é o texto: o link volta a ser inline e quebra; a seta acompanha a última palavra e o hover (transform no ::after inline-block) continua. */ #processos table.data .link-arrow, #exposicao table.data .link-arrow { display: inline; white-space: normal; } /* Quatro colunas DECLARADAS para quatro conteúdos. Documento leva 11.5rem porque o CNPJ formatado tem 18 caracteres em .mono e, com menos, quebra no "/" e no "-" (medido: 9.5rem partia "0001-12" para a linha de baixo). Valor ganha largura própria: sem ela, table-layout:fixed dividia a sobra em partes iguais com Credor e o nome ficava com metade do que podia — Credor é a única coluna elástica e absorve todo o resto. */ .tbl-cred th:nth-child(1) { width: auto; } .tbl-cred th:nth-child(2) { width: 11.5rem; } .tbl-cred th:nth-child(3) { width: 8rem; } .tbl-cred th:nth-child(4) { width: 11rem; } .tbl-expo th:last-child { width: 22%; } /* PRESERVADA da linha 566 */ .tbl-expo th:nth-child(1) { width: 40%; } .tbl-expo th:nth-child(2) { width: 22%; } .tbl-expo th:nth-child(3) { width: 20%; } /* Um chip por classe habilitada no caso: o mesmo credor pode ter crédito em classes diferentes do mesmo processo, e antes só a maior aparecia. Flex com wrap porque a coluna tem 20% e dois chips não cabem lado a lado no estreito. */ .tbl-expo .td-classes { display: flex; flex-wrap: wrap; gap: 4px; } /* O valor volta a NÃO quebrar — mas só no desktop. O override deliberado de mobile (empresa.css, @media max-width:768px table.data.responsive td.num) tem especificidade (0,2,2) e perderia para um seletor com id: por isso o carve-out. */ @media (min-width: 769px) { #processos table.data.responsive td.num, #exposicao table.data.responsive td.num { white-space: nowrap; overflow-wrap: normal; } } /* DIVERGÊNCIA do plano (especificidade): o plano escrevia `#processos .tbl-cred td` (1,1,1), que PERDERIA para o `#processos table.data.responsive td { overflow-wrap: anywhere }` já existente logo acima (1,2,2) — o `overflow-wrap: normal` nunca valeria. Ancorado na própria tabela (`table.data.responsive.tbl-cred`) a regra sai (1,3,2) e vence. */ #processos table.data.responsive.tbl-cred td { height: auto; padding: var(--sp-3); vertical-align: top; overflow-wrap: normal; word-break: normal; } #processos table.data.responsive.tbl-cred td[data-label="Credor"] { overflow-wrap: anywhere; } /* CNPJ inteiro numa linha: "/" e "-" são oportunidade de quebra para o navegador mesmo com overflow-wrap:normal — nowrap fecha a porta; a coluna de 11.5rem acima garante que os 18 caracteres cabem sem transbordar. */ #processos table.data.responsive.tbl-cred td[data-label="Documento"] { white-space: nowrap; } #processos .tbl-cred td.num { font-weight: 650; color: var(--pc-ink-900); font-variant-numeric: tabular-nums; } /* .td-cred saiu com a tabela dos "Maiores credores (PJ)" (virou .cred-top). */ #processos .tbl-cred .chip { white-space: nowrap; } /* O th sticky de components.css é CÓDIGO MORTO aqui: o scrollport do sticky é o .tbl-scroll (overflow-x:auto → overflow-y usado = auto), que não rola na vertical. Declarar e nunca grudar é pior que não declarar. */ #processos .tbl-scroll table.data th, #exposicao .tbl-scroll table.data th { position: static; } /* sub-linha (CNJ + distribuição) sob o nome da devedora e UF ao lado do tipo (§4.e) */ .td-sub { display: block; font-size: var(--fs-xs); color: var(--pc-ink-400); margin-top: 2px; } .td-uf { font-size: var(--fs-xs); color: var(--pc-ink-500); font-weight: 600; } /* CNJ na sub-linha: o número absorveu a lista "Processos em que figura como credora", que era um bloco inteiro só para exibi-lo. Herda o fs-xs do .td-sub (não o fs-sm de .mono, que competiria com o nome da devedora acima) e fica em tom de identificador — o link forte da linha continua sendo o nome. */ .td-cnj { font-family: var(--font-mono); font-size: inherit; color: var(--pc-ink-500); white-space: nowrap; /* sublinhado fraco SEMPRE: sem ele o número parecia texto morto e ninguém descobriria que ali estão os autos (era o antigo "Detalhes no portal"). */ text-decoration: underline; text-decoration-color: var(--pc-ink-300); text-underline-offset: 2px; } .td-cnj:hover { color: var(--pc-petrol-700); text-decoration-color: currentColor; } /* Mobile: a linha vira `rótulo | valor` (td em flex, ::before de 67px) e sobram ~150px para um CNJ de 166px — com nowrap ele vazava a coluna. Quebra, mas no HÍFEN do número (break-word respeita a oportunidade natural: "5008465-" + "92.2023.8.24.0023", 2 linhas) em vez do `anywhere` herdado da tabela, que picotava o identificador em 3 linhas no meio dos dígitos. */ @media (max-width: 768px) { .td-cnj { white-space: normal; overflow-wrap: break-word; word-break: normal; } } /* Célula sem dado publicado (caso em que ela é parte credora mas a relação de credores não trouxe linha com valor): apagada de propósito, sem virar "R$ 0". */ .td-nulo { color: var(--pc-ink-400); font-size: var(--fs-xs); } td.num .td-nulo { font-size: inherit; font-weight: 400; } /* ============================== Card afirmativo de insolvência (§4.a.2 / §2.9) Estado RECEITA_SEM_CAPTURA: a empresa ESTÁ em insolvência (flag da Receita), mas o processo é anterior à janela de captura. NÃO é um "empty" apagado — é uma AFIRMAÇÃO da condição, com nota honesta de janela. Conserta o bug. */ .insolv-afirma { display: grid; grid-template-columns: 48px 1fr; gap: var(--sp-4); align-items: start; padding: var(--sp-5); border: var(--hairline); border-radius: var(--r-md); border-left: 4px solid var(--band-c, var(--pc-warning-600)); background: var(--band-bg, var(--pc-warning-100)); } .insolv-afirma.insolv-warn { --band-c: var(--pc-warning-600); --band-bg: var(--pc-warning-100); } .insolv-afirma.insolv-danger { --band-c: var(--pc-danger-600); --band-bg: var(--pc-danger-100); } .insolv-afirma-ico { color: var(--band-c); } .insolv-afirma-ico .icn { width: 40px; height: 40px; } @media (prefers-reduced-motion: no-preference) { .insolv-afirma-ico .icn { animation: pc-float 6s ease-in-out infinite; } } .insolv-afirma-body { min-width: 0; } .insolv-afirma-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } .insolv-afirma-head h3 { margin: 0; font-size: var(--fs-h4); color: var(--pc-ink-900); } .insolv-afirma-body p { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--pc-ink-700); line-height: 1.6; max-width: 72ch; } /* trilha de marcos neutra dentro do card afirmativo — rola no mobile */ .insolv-marcos { margin-top: var(--sp-5); overflow-x: auto; } /* No estado RECEITA_SEM_CAPTURA a trilha é EDUCATIVA e fica COLAPSADA (não há fase real a mostrar) — evita a fileira alta de nós ocos. Abre sob demanda. */ .insolv-etapas { margin-top: var(--sp-4); } .insolv-etapas > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 650; color: var(--pc-petrol-700); padding: var(--sp-1) 0; } .insolv-etapas > summary::-webkit-details-marker { display: none; } .insolv-etapas > summary:hover .insolv-etapas-txt { text-decoration: underline; } .insolv-etapas > summary:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--r-sm); } .insolv-etapas-chevron { width: 8px; height: 8px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--t-base); } .insolv-etapas[open] .insolv-etapas-chevron { transform: rotate(225deg) translateY(-1px); } .insolv-etapas[open] .insolv-marcos { margin-top: var(--sp-4); } @media (prefers-reduced-motion: no-preference) { .insolv-etapas[open] .insolv-marcos { animation: pc-fade-up 300ms var(--ease-out) both; } } @media (max-width: 560px) { .insolv-afirma { grid-template-columns: 1fr; } .insolv-afirma-ico .icn { width: 32px; height: 32px; } } /* ============================== Interesse condensado (§2.5 / §4.c) Linha-resumo + UM gráfico, igual para visitante, conta gratuita e plano pago. Saíram daqui a sparkline de 48px (repetia a série do gráfico), os mini-stats (repetiam os números da frase) e o divisor da camada de conta. */ .interesse-card { align-self: start; } /* .interesse-h3 saiu junto com o overline: o cabeçalho deste bloco passou a ser o .sec-head padrão da ficha (ícone + h2 + .sec-sub). */ .interesse-resumo { font-size: var(--fs-sm); color: var(--pc-ink-700); line-height: 1.55; margin: var(--sp-4) 0 var(--sp-3); } .interesse-resumo strong { color: var(--pc-ink-900); } .interesse-medicao { margin: var(--sp-4) 0 0; } /* ============================== Tooltip discreto (data-tip) — escopo da ficha (não há componente global; implementação mínima, só onde a ficha usa .tip) */ .tip { position: relative; cursor: help; border-bottom: 1px dotted var(--pc-ink-300); } .tip[data-tip]:hover::after, .tip[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: max-content; max-width: 260px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); font-weight: 400; line-height: 1.4; text-transform: none; letter-spacing: normal; color: #fff; background: var(--pc-ink-900); border-radius: var(--r-sm); box-shadow: var(--shadow-2); white-space: normal; pointer-events: none; } .sec-head .tip.tag-inline { border-bottom: 0; } /* ============================================================================ ============================ FICHA v2 (fx-) ============================== Blueprint docs/ux-ui/03 §B. Sete assinaturas visuais distintas — uma por função — para o dono nunca ver "blocos todos iguais". Namespace fx- para não colidir com indic-/rfb-/proc-/marcos-. ============================== */ /* ---- keyframe de pulse da fase atual do stepper (reduced-motion respeitado) */ /* @keyframes fx-pulse MOVIDO para components.css (usado pelo stepper compartilhado — ver seção "PROCESSO — jornada + andamentos"). */ /* ============================== Aviso de FILIAL (acima do herói) Vive só na ficha aberta por um CNPJ de filial. Faixa de INFORMAÇÃO, não de alerta: azul da família --pc-info (o âmbar é risco e o vermelho é falência — nenhum dos dois descreve "você digitou a filial"). Fica acima do H1 porque a pergunta que ele responde ("por que o CNPJ na tela é outro?") nasce antes da primeira linha lida. */ .ficha-filial { display: flex; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-6); padding: var(--sp-3) var(--sp-4); background: var(--pc-info-100); border: 1px solid #C3D9EC; /* mesmo par do .chip-c1 */ border-radius: var(--r-md); } .ficha-filial .icn { width: 20px; height: 20px; flex: none; color: var(--pc-info-600); margin-top: 2px; } /* Sem medida curta: a caixa é de largura cheia e o texto acompanha. O teto de 68ch que havia aqui existia para evitar a órfã (uma linha longa + meia linha) em telas de 1800px, mas o preço era a frase parando na metade da caixa em QUALQUER largura — que é o defeito que se vê, não a órfã que se evita. `pretty` resolve a órfã sem encurtar as linhas anteriores; `balance`, que estava aqui, faz o oposto: iguala as linhas encolhendo-as de propósito, o que reproduziria o mesmo "para no meio" mesmo depois de tirar o teto. */ .ficha-filial__txt { min-width: 0; } .ficha-filial p { margin: 0; font-size: var(--fs-sm); color: var(--pc-ink-700); line-height: 1.55; text-wrap: pretty; } .ficha-filial strong { color: var(--pc-ink-900); } /* CNPJ nunca parte em duas linhas — é um número, não uma frase */ .ficha-filial .mono { white-space: nowrap; } /* sem mexer no display: .link-arrow já é inline-flex com gap de 6px até a seta (inline-block matava esse gap e colava a → na última palavra) */ .ficha-filial .link-arrow { margin-top: var(--sp-1); font-size: var(--fs-sm); } /* ============================== [1] HERÓI — identidade + selo de estado Único bloco com selo colorido cheio. Monograma + H1 + selo grande. */ .fx-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-5); align-items: start; border: var(--hairline-strong); border-radius: var(--r-lg); border-top: 4px solid var(--fx-hero-c, var(--pc-petrol-500)); background: var(--pc-bg-0); box-shadow: var(--shadow-1); padding: var(--sp-5) var(--sp-6); } .fx-hero--rj { --fx-hero-c: var(--pc-warning-600); --fx-hero-bg: var(--pc-warning-100); --fx-hero-txt: var(--pc-warning-700); } .fx-hero--falencia { --fx-hero-c: var(--pc-danger-600); --fx-hero-bg: var(--pc-danger-100); --fx-hero-txt: var(--pc-danger-700); } .fx-hero--ok { --fx-hero-c: var(--pc-success-600); --fx-hero-bg: var(--pc-success-100); --fx-hero-txt: var(--pc-success-700); } .fx-hero--confirma { --fx-hero-c: var(--pc-ink-400); --fx-hero-bg: var(--pc-bg-100); --fx-hero-txt: var(--pc-ink-700); } /* --neutro: ATO SEM RITO. Pedido de insolvência INDEFERIDO (a inicial foi rejeitada: nenhum processo de recuperação ou falência corre) ou rito já encerrado. Distinto de --confirma, que é "papel em revisão" — aqui o dado é certo, o que não existe é a insolvência. Mesmos tokens de cinza; a diferença é semântica e vive no rótulo. */ .fx-hero--neutro { --fx-hero-c: var(--pc-ink-400); --fx-hero-bg: var(--pc-bg-100); --fx-hero-txt: var(--pc-ink-700); } .fx-hero__mono { width: 68px; height: 68px; border-radius: var(--r-lg); flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--fx-hero-txt, var(--pc-petrol-700)); background: var(--fx-hero-bg, var(--pc-petrol-100)); border: 1px solid color-mix(in srgb, var(--fx-hero-c) 30%, transparent); } .fx-hero__id { min-width: 0; } .fx-hero__id h1 { margin: var(--sp-1) 0 0; overflow-wrap: anywhere; hyphens: auto; line-height: 1.12; } /* Razão social oficial sob o H1 quando o chamariz é o nome fantasia. */ .fx-hero__razao { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--pc-ink-500); overflow-wrap: anywhere; line-height: 1.35; } .fx-hero__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--pc-ink-500); } .fx-hero__meta .mono { color: var(--pc-ink-700); font-size: var(--fs-sm); } .fx-hero__dot { color: var(--pc-ink-300); } .fx-hero__sub { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--pc-ink-400); line-height: 1.5; } /* (T4) Crachá de ESTADO à direita: carimbo de cartório, não badge tímido. */ .fx-hero__badge { align-self: stretch; display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 168px; max-width: 216px; padding: var(--sp-4); border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--fx-hero-c) 34%, transparent); border-top: 4px solid var(--fx-hero-c); background: var(--fx-hero-bg); color: var(--fx-hero-txt); box-shadow: var(--shadow-1); } .fx-hero__badge-ico { display: inline-flex; } .fx-hero__badge-ico .icn { width: 28px; height: 28px; color: var(--fx-hero-c); } .fx-hero__badge-txt { font-size: var(--fs-h4); font-weight: 800; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; } .fx-hero__badge-sub { font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; color: color-mix(in srgb, var(--fx-hero-txt) 82%, transparent); } @media (max-width: 720px) { .fx-hero { grid-template-columns: auto minmax(0, 1fr); } .fx-hero__badge { grid-column: 1 / -1; max-width: none; flex-direction: row; align-items: center; gap: var(--sp-3); } .fx-hero__badge-txt { font-size: var(--fs-body); } .fx-hero__badge-sub { display: none; } } @media (max-width: 560px) { .fx-hero { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-5); } .fx-hero__mono { width: 52px; height: 52px; font-size: 1.3rem; } } /* ============================== [2] KPI-row calma Reaproveita .indic; só ajusta a grade (3 ou 4 tiles, sem o selo). */ @media (min-width: 720px) { .indic-row--3 { grid-template-columns: 1fr 1fr 1fr; } } .fx-kpirow { margin-top: var(--sp-4); } /* (T5) KPI de relacionamento — estrelas fracionárias (glifo empilhado, dourado premium) + score /5. Mesma técnica de .vr-star, escala menor para o tile. */ .indic-estrelas { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .indic-stars { display: inline-flex; gap: 2px; line-height: 1; } .istar { position: relative; width: 1em; height: 1em; font-size: 1.15rem; color: var(--pc-gold-300); /* trilho vazio */ } .istar::before, .istar__fill::before { content: "★"; position: absolute; inset: 0; display: block; text-align: center; } .istar__fill { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: var(--pc-gold-600); /* preenchido */ } /* Estado VAZIO (N<3, "sem avaliações ainda"): o trilho não pode ficar dourado — ★★★★★ dourado lê como nota ~5/5. Neutraliza para não enganar a leiga. */ .indic-stars.is-vazio .istar { color: var(--pc-line-200); } .indic-num-v--dim { color: var(--pc-ink-300); } /* ============================== [3] BENTO — identidade + localização mini + teasers col 1 (identidade em cima, localização embaixo, span 2 linhas) · col 2 (2 tiles). grid-auto-rows: min-content → densidade adaptativa (tiles encolhem, não esticam). */ /* (T2) ESQUERDA = identidade (um card); DIREITA = aside com pesquisa (topo) + localização (base). Junta os dois blocos leves numa coluna só — sem o vazio lateral que a exposição-teaser (agora KPI T3) deixava. */ .fx-bento { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-4); align-items: start; } .fx-bento__id { grid-column: 1; } .fx-bento__aside { grid-column: 2; display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; } @media (max-width: 900px) { .fx-bento { grid-template-columns: 1fr; } .fx-bento__id, .fx-bento__aside { grid-column: 1; } } /* pesquisa condensada (clicável → #comunidade) */ .fx-bento__pesquisa { text-decoration: none; color: inherit; display: block; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .fx-bento__pesquisa:hover { border-color: var(--pc-petrol-300); box-shadow: var(--shadow-2); text-decoration: none; } .fx-pesq__row { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-2); } .fx-pesq__num { font-size: var(--fs-h2); font-weight: 780; line-height: 1; color: var(--pc-petrol-600); font-variant-numeric: tabular-nums; } .fx-pesq__lbl { font-size: var(--fs-sm); color: var(--pc-ink-500); } .fx-pesq__tend--up { color: var(--pc-success-600); } .fx-pesq__tend--down { color: var(--pc-danger-600); } .fx-pesq__spark { display: block; margin: var(--sp-2) 0; } .fx-pesq__cta { display: inline-block; font-size: var(--fs-sm); font-weight: 600; color: var(--pc-petrol-600); } .fx-pesq__vazio { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--pc-ink-500); line-height: 1.5; } /* info-list em 2 subcolunas quando couber (densidade da identidade) */ .info-list--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); } .info-list--2col li { border-bottom: var(--hairline); } @media (max-width: 560px) { .info-list--2col { grid-template-columns: 1fr; } } /* localização compacta: mini-mapa PEQUENO ao lado do texto */ .fx-geo { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); } .mini-map--xs { max-width: 128px; margin: 0; flex: none; } .fx-geo__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fx-geo__cidade { font-size: var(--fs-body); font-weight: 700; color: var(--pc-ink-900); overflow-wrap: anywhere; } .fx-geo__uf { font-size: var(--fs-sm); color: var(--pc-ink-700); } .fx-geo__nota { font-size: var(--fs-xs); color: var(--pc-ink-400); margin-top: 2px; } .fx-geo__vazio { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--pc-ink-500); } /* endereço e contato declarados no CNPJ — dois blocos no pé do card Localização */ .fx-endr, .fx-fone { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: var(--hairline); } .fx-endr__rot { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pc-ink-400); } .fx-endr__rot .icn { width: 15px; height: 15px; color: var(--pc-petrol-600); } .fx-endr__txt { display: flex; flex-direction: column; gap: 2px; margin: var(--sp-2) 0 0; font-style: normal; } .fx-endr__rua { font-size: var(--fs-body); font-weight: 600; color: var(--pc-ink-900); overflow-wrap: anywhere; } .fx-endr__compl { font-size: var(--fs-sm); color: var(--pc-ink-700); overflow-wrap: anywhere; } .fx-endr__loc { font-size: var(--fs-sm); color: var(--pc-ink-500); overflow-wrap: anywhere; } /* prévia e botão na MESMA linha, botão à direita — mascarado o bloco ocupa duas linhas (rótulo + prévia), não quatro. Em cartão estreito o botão desce sozinho (wrap) em vez de espremer o número. Revelado, o botão some e a lista fica com a linha inteira. */ .fx-fone__linha { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); } .fx-fone__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fx-fone__item { display: flex; align-items: baseline; gap: var(--sp-2); } .fx-fone__num { font-size: var(--fs-body); font-weight: 600; color: var(--pc-ink-900); font-variant-numeric: tabular-nums; } .fx-fone__num a { color: inherit; text-decoration: none; } .fx-fone__num a:hover { text-decoration: underline; } .fx-fone__mask { margin-left: 3px; color: var(--pc-ink-300); letter-spacing: .1em; font-size: .78em; vertical-align: 1px; } /* e-mail é mais longo que telefone: cabe menor e quebra em qualquer ponto */ .fx-fone__mail { font-size: var(--fs-sm); overflow-wrap: anywhere; } .fx-fone__dom { color: var(--pc-ink-700); font-weight: 500; } .fx-fone__btn { display: inline-block; flex: none; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--pc-petrol-600); cursor: pointer; } .fx-fone__btn:hover { text-decoration: underline; } /* display explícito vence o [hidden] do agente — os dois precisam do próprio */ .fx-fone__btn[hidden], .fx-fone__nota[hidden] { display: none; } .fx-fone__btn[disabled] { color: var(--pc-ink-400); cursor: default; text-decoration: none; } .fx-fone__nota { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--pc-ink-400); line-height: 1.45; } /* sparkline (usada agora no card de pesquisa condensado) */ .fx-spark-svg { display: block; width: 100%; height: 30px; } /* barras finas por dia (§8) — pico destacado; base fica clara mesmo em dia zero */ .fx-spark-bar { fill: var(--pc-petrol-200); } .fx-spark-bar.is-pico { fill: var(--pc-petrol-500); } /* ============================== [4] EXPOSIÇÃO — número-herói, cor própria (azul) Contrasta com o âmbar de risco: azul = "a receber". */ /* O filete vem de .card[data-secao]; aqui só a cor (azul = "a receber"). */ .fx-expo { --sec-acento: var(--pc-info-600); } .fx-expo__hero { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5) var(--sp-6); align-items: center; margin-bottom: var(--sp-5); padding: var(--sp-5); border-radius: var(--r-md); background: var(--pc-info-100); } .fx-expo__numwrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fx-expo__num { font-size: var(--fs-kpi); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--pc-info-600); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .fx-expo__numlbl { font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--pc-info-600); } .fx-expo__ctx { min-width: 0; } .fx-expo__ctx p { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--pc-ink-700); line-height: 1.55; } .fx-expo__ctx strong { color: var(--pc-ink-900); } .fx-expo__maior strong { color: var(--pc-info-600); } .fx-expo__stamp { margin: var(--sp-2) 0 0 !important; } @media (max-width: 640px) { .fx-expo__hero { grid-template-columns: 1fr; gap: var(--sp-3); text-align: left; } } /* MOVIDO para components.css (seção "PROCESSO — jornada + andamentos"): .marcos-solo / .marcos-data* / pulse da fase atual. O bloco é renderizado por partials/proc-jornada e partials/proc-andamentos, que a ficha do Explorador e o /painel compartilham — o CSS tinha de sair de um stylesheet de PÁGINA para o global, senão a mesma marcação viria sem estilo na área logada. */ /* MOVIDO para components.css (seção "PROCESSO — jornada + andamentos"): .fx-tl* (caixa, itens, selos e recorte "com documento"). O bloco é renderizado por partials/proc-jornada e partials/proc-andamentos, que a ficha do Explorador e o /painel compartilham — o CSS tinha de sair de um stylesheet de PÁGINA para o global, senão a mesma marcação viria sem estilo na área logada. */ /* ============================================================================== DASHBOARD DO PROCESSO (accordion aberto) — spec 04/05, adaptado à marca. Só tokens --pc-… --r-… --sp-… --fs-… (escritos sem asterisco de propósito: a sequência `*` seguida de `/` FECHA o comentário, e o resto virava seletor — matava a regra .proc-sum-cnj logo abaixo). teal do spec → petrol; badges de classe → tints info/warning/petrol; dourado só no CTA de planos. ============================================================================ */ /* ---- Header do accordion: novos elementos (fase + credores) ---------------- */ .proc-sum-cnj { overflow-wrap: anywhere; } .proc-sum-fase { font-size: var(--fs-sm); font-weight: 650; color: var(--pc-petrol-700); position: relative; padding-left: var(--sp-3); } .proc-sum-fase::before { content: "·"; position: absolute; left: 0; color: var(--pc-ink-300); font-weight: 400; } .proc-sum-val--cred { color: var(--pc-ink-700); } .proc-sum-dagger { margin-left: 2px; color: var(--pc-ink-300); font-weight: 400; cursor: help; } /* ---- O bloco do processo é UMA coluna. O rail de 265px saiu; devolve 289px (265 + 24 de gap) à tabela e à ficha de dados. -------------------- */ .proc-dash { display: block; } .proc-dash__main { min-width: 0; } /* ---- Barra de identidade do processo + gate das peças ------------------- */ .proc-id { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-5); row-gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-5); border: var(--hairline-strong); border-radius: var(--r-md); background: var(--pc-bg-50); } .proc-id__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); min-width: 0; } .proc-id__k { font-size: 0.75rem; font-weight: 600; color: var(--pc-ink-500); } .proc-id__cnj { font-size: var(--fs-sm); font-weight: 620; color: var(--pc-ink-900); font-variant-numeric: tabular-nums; } .proc-id__ext { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--pc-petrol-600); } .proc-id__ext .icn { width: 14px; height: 14px; } /* ---- Aviso de extração pendente ---------------------------------------- A PEÇA (.proc-extracao) mora em components.css: a aba Credores do /painel mostra o mesmo aviso sobre o mesmo vazio e não carrega este arquivo. O que fica aqui é só a COLAGEM à barra de identidade (a barra perde a margem quando o aviso existe): os dois são a mesma unidade de leitura — "este processo" e "o que ainda não sabemos dele" —, e isso é do Explorador. */ .proc-id:has(+ .proc-extracao) { margin-bottom: var(--sp-3); } /* ---- LAJE DE PANORAMA (KPI) -------------------------------------------- A separação passa a ser de SUPERFÍCIE, não de margem: antes o gap KPIs→h4 era 20px, exatamente o mesmo de tudo→tudo. Agora: laje petróleo + eyebrow + 32px de degrau de seção. */ .proc-panel { background: var(--pc-petrol-50); border: 1px solid var(--pc-petrol-200); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-5) var(--sp-3); margin: 0 0 var(--sp-8); } .proc-panel__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-5); row-gap: var(--sp-4); } /* Divisórias verticais em vez de 4 mini-cards com sombra dentro de outro card */ .pk { display: flex; flex-direction: column; min-width: 0; padding-left: var(--sp-5); border-left: 1px solid var(--pc-petrol-200); } .pk:first-child { padding-left: 0; border-left: 0; } /* LINHA DE BASE COMUM sem subgrid: o rótulo reserva 2 linhas e o valor é empurrado ao pé. Antes os 5 valores caíam em 3 alturas (27px de dispersão). */ .pk-label { display: flex; align-items: flex-start; gap: 6px; min-height: 2.6em; } .pk-label .icn { width: 15px; height: 15px; flex: none; color: var(--pc-petrol-600); margin-top: 1px; } .pk-value { margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-h3); font-weight: 750; color: var(--pc-petrol-900); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: normal; word-break: keep-all; overflow-wrap: normal; max-width: 100%; } .pk-value--fase { font-size: var(--fs-h4); overflow-wrap: anywhere; } .pk-value--vazio { color: var(--pc-ink-300); font-weight: 650; font-size: var(--fs-h4); } .pk-stamp { margin-top: 2px; } .pk--vazio .pk-value { opacity: .78; } .proc-panel__foot { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--pc-petrol-200); font-size: 0.6875rem; color: var(--pc-ink-500); } .proc-panel__foot .icn { width: 14px; height: 14px; flex: none; color: var(--pc-petrol-600); } .proc-panel__foot strong { color: var(--pc-ink-700); font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .proc-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pk:nth-child(odd) { padding-left: 0; border-left: 0; } } @media (max-width: 440px) { .proc-panel__grid { grid-template-columns: 1fr; } .pk { padding-left: 0; border-left: 0; padding-top: var(--sp-3); border-top: 1px solid var(--pc-petrol-200); } .pk:first-child { padding-top: 0; border-top: 0; } } /* MOVIDO para components.css (seção "PROCESSO — jornada + andamentos"): .proc-recorte. O bloco é renderizado por partials/proc-jornada e partials/proc-andamentos, que a ficha do Explorador e o /painel compartilham — o CSS tinha de sair de um stylesheet de PÁGINA para o global, senão a mesma marcação viria sem estilo na área logada. */ /* ---- Rodapé de procedência (o que sobrou do rail) ----------------------- */ .proc-fontes { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: var(--hairline-strong); } .pf-rot { font-size: 0.6875rem; font-weight: 650; color: var(--pc-ink-500); } .pf-txt { grid-column: 2; margin: 0; max-width: 88ch; } .pf-links { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-1); } .pf-links a { font-size: var(--fs-sm); font-weight: 600; } .pf-links .ext-link { display: inline-flex; align-items: center; gap: 6px; color: var(--pc-petrol-600); } .pf-links .ext-link:hover { color: var(--pc-petrol-700); text-decoration: none; } @media (max-width: 560px) { .proc-fontes { grid-template-columns: minmax(0, 1fr); } .pf-txt, .pf-links { grid-column: 1; } } /* MOVIDO para components.css (seção "PROCESSO — jornada + andamentos"): .proc-journey / .marcos-stepper--h / check de fase concluída / nó hipotético. O bloco é renderizado por partials/proc-jornada e partials/proc-andamentos, que a ficha do Explorador e o /painel compartilham — o CSS tinha de sair de um stylesheet de PÁGINA para o global, senão a mesma marcação viria sem estilo na área logada. */ /* ---- Maiores credores (PJ): LISTA compacta, não tabela ------------------ Três dados curtos por credor não pagam o custo de uma tabela: cabeçalho de coluna + CNPJ em segunda linha davam ~110px de altura por credor. Aqui é uma linha por credor (posto · nome + documento inline · classe · valor), com o ranking no marcador — o mesmo conteúdo em cerca de um terço da altura. */ #processos .proc-body h4.cred-top-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .cred-top-regua { font-size: var(--fs-xs); font-weight: 500; color: var(--pc-ink-400); letter-spacing: 0; } /* Painel rebaixado, a mesma receita da caixa dos andamentos (.fx-tl-box): num corpo de accordion que é só texto corrido sobre branco, o fundo é o que diz "aqui começa e aqui acaba uma tabela" sem gastar mais um título. */ .cred-top { list-style: none; margin: 0; counter-reset: credtop; border: var(--hairline); border-radius: var(--r-md); background: var(--pc-bg-50); padding: var(--sp-2) var(--sp-4); } .cred-top__item { counter-increment: credtop; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto auto; align-items: baseline; column-gap: var(--sp-3); padding: var(--sp-2) 0; border-top: var(--hairline); } .cred-top__item:first-child { border-top: 0; } .cred-top__item::before { content: counter(credtop); text-align: right; font-size: var(--fs-xs); color: var(--pc-ink-300); font-variant-numeric: tabular-nums; } /* Nome um degrau ABAIXO do valor (13px × 15px): a razão social vem em caixa alta da RFB e, no mesmo corpo do valor, dominava a linha — quem ordena a lista é o crédito. O nome identifica; o valor é o dado. */ .cred-top__nome { min-width: 0; font-size: var(--fs-sm); font-weight: 620; color: var(--pc-ink-900); overflow-wrap: anywhere; } /* documento na MESMA linha do nome (era .td-sub, uma segunda linha por credor) */ .cred-top__doc { margin-left: var(--sp-2); font-size: var(--fs-xs); font-weight: 400; color: var(--pc-ink-400); white-space: nowrap; } #processos .cred-top__classe { white-space: nowrap; } .cred-top__val { font-size: var(--pc-t-valor, var(--fs-body)); font-weight: 650; color: var(--pc-ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } /* Estreito: o nome toma a linha inteira e classe/valor descem juntos — nunca uma coluna de 3 caracteres espremendo o nome do credor. */ @media (max-width: 640px) { .cred-top__item { grid-template-columns: 1.25rem minmax(0, 1fr) auto; row-gap: 2px; } .cred-top__nome { grid-column: 2 / -1; } .cred-top__classe { grid-column: 2; justify-self: start; } .cred-top__val { grid-column: 3; } .cred-top__doc { display: block; margin-left: 0; } } /* ---- Cards de classe: cabem na linha, ZERO overflow --------------------- Sai grid-auto-flow:column + overflow-x:auto, cuja "rede de segurança" (@media ≤720px { grid-auto-columns: minmax(150px,1fr) }) era o que produzia 240px MEDIDOS de rolagem horizontal a 700px. Entra auto-fit: em tela larga tudo numa linha; sem largura, QUEBRA em ordem — nunca rola. */ .cred-classe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: var(--sp-2); margin-bottom: 0; overflow: visible; } .cred-classe { display: flex; flex-direction: column; gap: 0; min-width: 0; text-align: left; background: var(--pc-bg-0); border: var(--hairline-strong); border-top: 3px solid var(--cc-cor, var(--pc-line-200)); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); } .cred-classe > * { margin: 0; } /* mata os 3 recuos diferentes medidos */ .cc-classe { font-size: var(--fs-sm); font-weight: 700; color: var(--pc-ink-900); line-height: 1.2; } .cc-nome { overflow-wrap: anywhere; min-height: 2.5em; } /* base comum p/ o valor */ .cc-value { margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-h4); font-weight: 800; color: var(--pc-ink-900); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; } .cc-count { margin-top: 2px; font-size: var(--fs-xs); color: var(--pc-ink-400); font-variant-numeric: tabular-nums; } /* Cor da classe como FILETE de topo, não fundo chapado: sobre branco o agregado lê como NÚMERO; sobre chapado colorido lia como etiqueta. */ .cred-classe--i { --cc-cor: var(--pc-info-600); } .cred-classe--ii { --cc-cor: var(--pc-warning-600); } .cred-classe--iii { --cc-cor: var(--pc-petrol-500); } .cred-classe--iv, .cred-classe--me_epp { --cc-cor: #5E4699; } /* ---- Cards como FILTRO (só na visão liberada de admin) ------------------ Vira