/* VxOS V2 - Comissao de Fundos (diligencia): redesenho visual na linguagem do modo Triagem. Pegada: linha densa escaneavel > cartao grande; barra fina > anel; chip pequeno de status/motivo; faixa de severidade a esquerda (vermelho > amarelo > verde) com rotulo textual e contagem (a cor nunca e a unica codificacao). Reaproveita os tokens de contraste (--warn-text/--pos-text/--neg-text/ --teal-btn) e as classes .trow-* ja definidas na secao 5 de v2-preview.css. IMPORTANTE (ordem da cascata): o modulo injeta a CSS de PRODUCAO (assets/css/modules/diligencia.css, id=dlg-css) em runtime via document.head.appendChild, ou seja, ELA ENTRA POR ULTIMO no , depois deste arquivo estatico. Por isso as regras que sobrescrevem classes de producao (.dlg-*/.dash-*) sao ancoradas em `body` (+0,0,1 de especificidade): assim vencem o empate de classe sem !important e sem regredir as correcoes de contraste da V2 (usam os mesmos tokens de TEXTO). Classes novas ficam iguais por consistencia. */ /* ============================================================ 1) LISTA DE DOSSIES: linhas densas (substitui os tiles com anel) ============================================================ */ body .dlg-caso-wrap{ border:1px solid var(--gray-200); border-radius:var(--r-card); overflow-x:auto; background:#fff; margin-top:2px; } body .dlg-caso-row{ display:grid; /* ultima coluna FIXA (nao 'auto'): senao o cabecalho vazio e as linhas com botoes teriam larguras diferentes e as colunas escorregariam. Header e linhas partilham exatamente este template. */ grid-template-columns:62px minmax(150px,1.5fr) 58px 120px minmax(168px,1.8fr) 150px 200px; align-items:center; gap:12px; padding:9px 14px; border-top:1px solid var(--gray-100); min-width:970px; cursor:pointer; box-shadow:inset 3px 0 0 var(--gray-300); /* faixa de severidade default (nd) */ } body .dlg-caso-row:first-child{border-top:0} body .dlg-caso-row.head{ background:var(--gray-50); cursor:default; box-shadow:none; font:700 10px 'Space Grotesk',sans-serif; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-500); padding-top:7px; padding-bottom:7px; } body .dlg-caso-row.head span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis} body .dlg-caso-row:not(.head):hover{background:#EAF7F7} /* faixa de cor a esquerda por severidade (ha sempre rotulo/contagem junto: cor nao e a unica pista) */ body .dlg-caso-row.sev-vermelho{box-shadow:inset 3px 0 0 var(--neg)} body .dlg-caso-row.sev-amarelo{box-shadow:inset 3px 0 0 var(--warn)} body .dlg-caso-row.sev-verde{box-shadow:inset 3px 0 0 var(--pos)} body .dlg-caso-row.sev-nd,body .dlg-caso-row.no-caso{box-shadow:inset 3px 0 0 var(--gray-300)} body .dlg-caso-c{min-width:0; overflow:hidden} /* nome do fundo na linha: navy 600 (mesma leitura do trow-nm do Buscador e do titulo do detalhe); sem isto o texto herdava a fonte-base e destoava da lista aprovada da Triagem */ body .dlg-caso-row .trow-name{font:600 13.5px 'Space Grotesk',sans-serif; color:var(--navy)} /* chip de pendencia (neutro/cinza: pendente = "em analise", nao e risco) */ body .dlg-caso-chip-pend{ font:600 10.5px 'Space Grotesk',sans-serif; padding:1px 7px; border-radius:6px; background:var(--gray-100); color:var(--gray-600); white-space:nowrap; } body .dlg-caso-chips{display:flex; align-items:center; gap:5px; flex-wrap:wrap} body .dlg-caso-sit{display:inline-flex; align-items:center; gap:6px; min-width:0} body .dlg-caso-sit-l{font:600 11.5px 'Space Grotesk',sans-serif; color:var(--gray-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} body .dlg-caso-acts{display:inline-flex; align-items:center; gap:10px; justify-content:flex-end; white-space:nowrap} body .dlg-caso-cnpj{font:500 11px 'Space Grotesk',sans-serif; color:var(--gray-500); white-space:nowrap} body .dlg-caso-row:hover .trow-open{color:var(--teal-btn)} body .dlg-caso-row.no-caso{cursor:default} body .dlg-caso-row.no-caso .dlg-criar{margin:0; padding:5px 12px; font-size:12px} /* grupo "Tombados": lista apagada (reversivel abrindo o dossie), mantendo a densidade */ body .dlg-tomb-wrap .dlg-caso-row:not(.head){opacity:.6} body .dlg-tomb-wrap .dlg-caso-row:not(.head):hover{opacity:1} /* faixas de TRANCHE: agrupa os dossies pela tranche do fundo (mesma leitura do Buscador) */ body .dlg-tr-sec{margin-bottom:16px} body .dlg-tr-band{display:flex; align-items:center; gap:10px; padding:6px 2px 5px} body .dlg-tr-name{font:700 12px 'Space Grotesk',sans-serif; color:var(--navy); text-transform:uppercase; letter-spacing:.06em} body .dlg-tr-count{margin-left:auto; font:600 11px 'Space Grotesk',sans-serif; color:var(--gray-500)} /* ============================================================ 2) DETALHE / CHECKLIST: etapas com faixa de severidade + itens densos ============================================================ */ /* cada etapa ganha 3px coloridos a esquerda pela severidade macro (nao_ok > pendente > ressalva > ok). border-left completo (0,2,1) vence o `border:1px` de producao (0,1,0) mesmo injetada por ultimo. */ body .dlg-group{padding:2px 16px 8px; margin-bottom:12px} body .dlg-group.dlg-macro-nao_ok{border-left:3px solid var(--neg)} body .dlg-group.dlg-macro-pendente{border-left:3px solid var(--gray-300)} body .dlg-group.dlg-macro-ok_ressalva{border-left:3px solid var(--warn)} body .dlg-group.dlg-macro-ok{border-left:3px solid var(--pos)} body .dlg-group.dlg-macro-na{border-left:3px solid var(--gray-200)} body .dlg-group .tema-h{padding:10px 0 8px} body .dlg-grp-name{font:700 13px 'Space Grotesk',sans-serif; color:var(--navy)} body .dlg-group .tema-h .tema-n{color:var(--gray-500); font:600 11.5px 'Space Grotesk',sans-serif} /* pilula macro da etapa: sobe de 9.5px para 10.5px e usa os tokens de contraste AA */ body .dlg-grp-macro{font-size:10.5px; padding:2px 9px} body .dlg-grp-macro.st-ok{background:var(--pos-bg); color:var(--pos-text)} body .dlg-grp-macro.st-ok_ressalva{background:var(--warn-bg); color:var(--warn-text)} body .dlg-grp-macro.st-nao_ok{background:var(--neg-bg); color:var(--neg-text)} body .dlg-grp-macro.st-pendente{background:var(--gray-100); color:var(--gray-600)} /* barra fina de completude da etapa (pareia com o contador N/N, como o bar+% do modo Triagem). Neutra/teal: 0% = "no inicio", nao reprovado (vermelho/ambar ficam para status de risco). */ body .dlg-grp-bar{order:3; flex:none; width:66px; height:5px; background:var(--gray-100); border-radius:999px; overflow:hidden} body .dlg-grp-bar i{display:block; height:100%; background:var(--teal); border-radius:999px; transition:width .2s} /* item do checklist: linha densa; faixa fina a esquerda quando ha achado (nao OK / ressalva) */ body .dlg-item{padding:8px 2px 8px 10px; border-left:2px solid transparent} body .dlg-item[data-status="nao_ok"]{border-left-color:var(--neg); background:linear-gradient(90deg, rgba(239,68,68,.05), transparent 42%)} body .dlg-item[data-status="ok_ressalva"]{border-left-color:var(--warn); background:linear-gradient(90deg, rgba(245,158,11,.06), transparent 42%)} body .dlg-item.ress-vazia{border-left-color:var(--warn)} body .dlg-item-row{flex-wrap:wrap} /* wrap: rotulos longos nao esmagam o select (audit estetica) */ body .dlg-item-lbl{flex:1 1 220px; min-width:120px; font:500 13px 'Space Grotesk',sans-serif; color:var(--navy)} /* selo "N acao(oes)" e flag "ressalva em branco" como chips pequenos */ body .dlg-item-acn{font-size:10px; padding:2px 8px} body .dlg-ress-flag{ display:inline-flex; align-items:center; font:700 10px 'Space Grotesk',sans-serif; color:var(--warn-text); background:var(--warn-bg); border:1px solid #F3D9A4; border-radius:999px; padding:2px 8px; margin-left:0; white-space:nowrap; } /* select de status do item: mantem a cor-borda por status, com contraste AA no texto */ body .dlg-item-st{font-weight:600} body .dlg-item-st.st-ok{border-color:var(--pos); color:var(--pos-text)} body .dlg-item-st.st-ok_ressalva{border-color:var(--warn); color:var(--warn-text)} body .dlg-item-st.st-nao_ok{border-color:var(--neg); color:var(--neg-text)} /* acoes vinculadas ao item: deixa o timer/chip respirar sem esmagar a descricao */ body .dlg-iacao{flex-wrap:wrap} body .dlg-iacao-desc{flex:1 1 180px} /* ============================================================ 3) GATE DE GOVERNANCA: severidade clara, chips do que falta ============================================================ */ /* faixa a esquerda por estado do funil; border-left completo (0,2,1) vence o `border:1px` de producao */ body .dlg-gate.locked{border-left:4px solid var(--warn)} body .dlg-gate.ready{border-left:4px solid var(--pos)} body .dlg-gate.is-apto{border-left:4px solid var(--warn)} body .dlg-gate.is-tombado{border-left:4px solid var(--pos)} body .dlg-gate-sub{font-size:12.5px} body .dlg-gate.ready .dlg-gate-sub{color:var(--pos-text)} body .dlg-gate.is-apto .dlg-gate-sub{color:var(--warn-text)} body .dlg-gate.is-tombado .dlg-gate-sub{color:var(--pos-text)} /* botao "done" no estado Apto: usa o ambar escuro (AA) no lugar do --warn puro */ body .dlg-gate.is-apto .dlg-gate-btn.done{color:var(--warn-text); border-color:var(--warn-text)} /* cluster de chips do que falta resolver (o que pede acao, em evidencia) */ body .dlg-gate-chips{display:inline-flex; gap:6px; flex-wrap:wrap; align-items:center} body .dlg-gate-chip{ font:700 10.5px 'Space Grotesk',sans-serif; padding:2px 9px; border-radius:999px; white-space:nowrap; } body .dlg-gate-chip.neg{background:var(--neg-bg); color:var(--neg-text); border:1px solid #F5C2C2} body .dlg-gate-chip.pend{background:var(--gray-100); color:var(--gray-600)} /* aviso de ressalva sem justificativa: chip ambar (governanca) com contraste AA */ body .dlg-gate-warn{ display:inline-flex; align-items:center; gap:4px; margin-left:0; font:700 10.5px 'Space Grotesk',sans-serif; color:var(--warn-text); background:var(--warn-bg); border:1px solid #F3D9A4; border-radius:999px; padding:2px 9px; } /* ============================================================ 4) TIMERS / PRAZOS EM EVIDENCIA (chips com farol de urgencia) ============================================================ */ body .dlg-timer{ display:inline-flex; align-items:center; gap:4px; font:700 10.5px 'Space Grotesk',sans-serif; padding:2px 9px; border-radius:999px; white-space:nowrap; background:var(--gray-100); color:var(--gray-600); } body .dlg-timer.atrasado{background:var(--neg-bg); color:var(--neg-text)} body .dlg-timer.hoje{background:var(--warn-bg); color:var(--warn-text)} body .dlg-timer.ok{background:var(--pos-bg); color:var(--pos-text)} body .dlg-timer.muted{background:var(--gray-100); color:var(--gray-500)} /* ============================================================ 5) DASHBOARD DE ACOMPANHAMENTO: linha densa em 2 niveis (mesma pegada do detalhe do dossie) (body + !important p/ vencer a CSS de producao injetada em runtime) ============================================================ */ /* a acao vira 2 niveis: identidade + status/controles em cima; descricao + meta leve embaixo. Painel leve (moldura fina, sem sombra) no lugar do cartao pesado; a linha nao e clicavel inteira, entao o cursor volta ao normal (so o status e o "ver no dossie" agem). */ body .dash-row{display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:6px !important; padding:10px 14px !important; border-radius:10px !important; box-shadow:none !important; cursor:default !important} body .dash-row:hover{border-color:var(--gray-300) !important; box-shadow:none !important} /* border-left completo (mais especifico que o :hover acima) mantem a faixa de urgencia colorida no hover */ body .dash-row.sev-vermelho,body .dash-row.sev-vermelho:hover{border-left:3px solid var(--neg) !important} body .dash-row.sev-amarelo,body .dash-row.sev-amarelo:hover{border-left:3px solid var(--warn) !important} /* nivel 1: identidade a esquerda; timer + status + acesso empurrados a direita por um espacador flex */ body .dash-row-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap} body .dash-row-sp{flex:1 1 auto; min-width:8px} body .dash-fundo{font:700 13px 'Space Grotesk',sans-serif !important; color:var(--navy) !important; text-transform:none !important; letter-spacing:0 !important} /* situacao do fundo como PILULA (999px), nao mais texto solto colado ao nome */ body .dash-sit{display:inline-flex !important; align-items:center; gap:5px; margin-left:0 !important; font:700 10px 'Space Grotesk',sans-serif !important; text-transform:none; letter-spacing:0; background:var(--gray-100) !important; color:var(--gray-600) !important; border-radius:999px !important; padding:2px 9px !important} body .dash-row-head .dlg-acao-st,body .dash-row-head .dash-open{flex:none} /* link "ver no dossie": teal de acao (AA) no lugar do gray-400 (2.6:1) */ body .dash-open{color:var(--teal-btn) !important} body .dash-open:hover{color:#005F5F !important} /* nivel 2: descricao (conteudo) + meta leve (responsavel/prazo em caixa normal, avatar pequeno) + tags */ body .dash-row-body{display:flex; flex-direction:column; gap:5px} body .dash-desc{font:500 13px 'Space Grotesk',sans-serif !important; color:var(--navy) !important; margin-top:0 !important} body .dash-meta{margin-top:0 !important; gap:10px} body .dash-meta .dlg-resp{display:inline-flex; align-items:center; gap:5px; font:600 11.5px 'Space Grotesk',sans-serif; color:var(--gray-600)} body .dlg-resp-ava{flex:none; width:18px; height:18px; border-radius:50%; background:var(--navy); color:#fff; font:700 8px 'Space Grotesk',sans-serif; display:inline-flex; align-items:center; justify-content:center} body .dash-prazo{font:500 11.5px 'Space Grotesk',sans-serif !important; color:var(--gray-500)} /* tags da acao como TAG quadradinha (6px), nao pilula */ body .dash-tags .dlg-tag{border-radius:6px !important; font:700 10px 'Space Grotesk',sans-serif !important; padding:1px 7px !important; background:var(--gray-100) !important; color:var(--gray-600) !important; text-transform:none; letter-spacing:0} /* ============================================================ 6) OVERVIEW / MODEBAR: polimento denso (Space Grotesk, chips) ============================================================ */ body .dlg-modebar{margin-bottom:12px} body .ov-pill{font:600 12px 'Space Grotesk',sans-serif} body .dlg-ovcount b{color:var(--navy)} body .ov-pill-btn.on{border-color:var(--navy)} /* ============================================================ 7) ACESSIBILIDADE: foco visivel nos elementos acionaveis ============================================================ */ body .dlg-caso-row[data-fundo]:not(.no-caso):focus-visible, body .dlg-group .tema-h:focus-visible{outline:2px solid var(--teal); outline-offset:2px} /* ============================================================ 8) RESPONSIVO: a lista densa rola dentro do proprio wrap ============================================================ */ @media (max-width:720px){ body .dlg-caso-cnpj{display:none} /* em telas estreitas, CNPJ some antes de espremer a linha */ } /* ============================================================ 9) TO-DOS POR AREA no checklist do dossiê (V2 protótipo) ============================================================ */ /* toggle "Agrupar por: Etapa | Área" */ body .dlg-grpby{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px} body .dlg-grpby-l{font:600 11px 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500)} body .dlg-grpby-seg{display:inline-flex;border:1px solid var(--gray-300);border-radius:var(--r-ctrl);overflow:hidden} body .dlg-grpby-btn{border:0;background:#fff;color:var(--gray-600);font:600 12px 'Space Grotesk',sans-serif;padding:4px 12px;cursor:pointer} body .dlg-grpby-btn+.dlg-grpby-btn{border-left:1px solid var(--gray-300)} body .dlg-grpby-btn.on{background:var(--navy);color:#fff} body .dlg-grpby-btn:not(.on):hover{background:var(--gray-50)} body .pa-proto{font:700 9px 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--warn-text);background:var(--warn-bg);border:1px solid #F3D9A4;border-radius:999px;padding:2px 9px} /* área + responsável + prazo no cabeçalho da etapa/área (cabeçalho pode quebrar em telas estreitas) */ body .dlg-group .tema-h{flex-wrap:wrap} body .dlg-area-meta{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap} body .dlg-area-chip{font:700 9.5px 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--teal-btn);background:#EAF7F7;border:1px solid #B9E3E3;border-radius:999px;padding:2px 8px;white-space:nowrap} body .dlg-area-resp{font:600 11.5px 'Space Grotesk',sans-serif;color:var(--gray-700);white-space:nowrap} body .pa-ava{flex:none;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font:700 9px 'Space Grotesk',sans-serif;display:inline-flex;align-items:center;justify-content:center} body .pa-prazo{font:600 11px 'Space Grotesk',sans-serif;color:var(--gray-600);white-space:nowrap} body .pa-prazo.late{color:var(--neg-text)} body .pa-prazo.today{color:var(--warn-text)} body .pa-prazo.done{color:var(--gray-400)} /* ============================================================ 10) DETALHE DO DOSSIE: cabecalho com BARRA (nao anel) + etapa em 2 linhas (menos poluido) (body + !important p/ vencer a CSS de producao injetada em runtime) ============================================================ */ /* cabecalho vira flex simples (desfaz o grid herdado do detalhe do Buscador) */ body .dlg-det-head{display:flex !important; align-items:center; gap:16px; grid-template-areas:none !important; grid-template-columns:none !important} body .dlg-det-head #det-back{align-self:center; flex:none} body .dlg-det-head .det-title{flex:1 1 auto; min-width:0} body .dlg-det-head .dlg-desc-btn{flex:none} /* progresso da diligencia como barra fina (consistente com o detalhe do Buscador, sem anel) */ body .dlg-det-prog{display:inline-flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:150px; flex:none} body .dlg-det-prog-l{font:600 10px 'Space Grotesk',sans-serif; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-500)} body .dlg-det-prog-bar{width:150px; height:7px; background:var(--gray-100); border-radius:999px; overflow:hidden} body .dlg-det-prog-bar i{display:block; height:100%; background:var(--teal); border-radius:999px} body .dlg-det-prog b{font:700 16px 'Space Grotesk',sans-serif; color:var(--navy); line-height:1} body .dlg-det-prog-sub{font:500 11px 'Space Grotesk',sans-serif; color:var(--gray-500)} /* ficha do dossie: cartoes empilhados (rotulo em cima, valor embaixo, a esquerda) - acaba com o vao enorme entre rotulo e valor e com a "sobra" cinza da ultima linha incompleta */ body .dlg-det-head + .ficha{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important; gap:8px !important; background:none !important; border:0 !important; padding:0 !important; margin-bottom:14px} body .dlg-det-head + .ficha .fc{display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:3px !important; background:#fff !important; border:1px solid var(--gray-200) !important; border-radius:10px !important; padding:9px 13px !important} body .dlg-det-head + .ficha .fc-k{font:600 9.5px 'Space Grotesk',sans-serif !important; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-500) !important; margin:0 !important} body .dlg-det-head + .ficha .fc-v{font:600 13px 'Space Grotesk',sans-serif !important; color:var(--navy) !important; text-align:left !important; margin:0 !important} /* etapa do checklist em 2 linhas: identidade + controles em cima, area/responsavel/prazo embaixo */ body .dlg-group .tema-h{display:flex !important; flex-direction:column; align-items:stretch; gap:7px; padding:11px 14px !important} body .dlg-eh-top{display:flex; align-items:center; gap:9px} body .dlg-eh-top .dlg-grp-bar{order:0; flex:none} body .dlg-eh-fill{flex:1} body .dlg-eh-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-left:22px; text-transform:none !important} body .dlg-eh-meta .dlg-area-resp{font:600 11.5px 'Space Grotesk',sans-serif; color:var(--gray-600); text-transform:none} body .dlg-eh-meta .pa-ava{width:19px; height:19px; font-size:8.5px} body .dlg-eh-meta .dlg-area-chip{font-size:9px} body .dlg-eh-meta .pa-prazo{font-weight:600}