/* ========================================================================== A FAMILIA DE ESTADO — DUAS familias: quatro por GRUPO, cinco por STATUS. Carrega DEPOIS de componentes.css: a regra da peca mora na folha da peca, e ordem de fonte nao decide o que a especificidade deveria decidir. POR QUE QUATRO FORMAS, E NAO UMA POR STATUS. Forma em 9 px nao se distingue — a discriminacao de forma em marca pequena satura em quatro ou cinco. A familia velha ja gastava cinco para seis enderecos com DUAS praticamente iguais — duas eram circulo vazado, e a diferenca entre elas era opacidade, nao forma. O que precisa ser lido SEM TEXTO e a pergunta, e as perguntas sao quatro. O status vem sempre em texto ao lado do no. ⚠ O ARGUMENTO CONTRA A QUINTA FORMA ESTA SUPERADO — 18/08/2026. Ele dizia "a quinta seria para Rejeitado ou Ignorado, que nascem do uso e sao ZERO na carga": aqueles dois status MORRERAM na troca do par, e os CINCO de 17/08 existem todos. A lei vigente pede CINCO formas chaveadas pelo STATUS, com o status escrito ao lado — e o grupo nao responde a pergunta da tela, porque Acompanhar junta dois donos diferentes. QUEM ESCREVE A FAMILIA NOVA E A TASK 3; esta folha atravessou transcrita. A familia de quatro por GRUPO NAO morre com ela: continua sendo a lingua da faixa dos quatro grupos. ✅ ESCRITA EM 18/08/2026, NA TASK 3 — e a familia nova e `.bola`, no fim deste arquivo, porque e a palavra que a lei usa ("de quem e a bola"). Os dois eixos ficam em modificadores da MESMA classe e nao se atrapalham: a cor escreve `color`, a forma escreve `background` e `border-style`. Tudo o que esta escrito acima sobre a familia de quatro CONTINUA VALENDO — ela e a lingua da faixa da Zona B, onde a pergunta e mesmo o grupo. A GRAMATICA DO PREENCHIMENTO E A MESMA DA PILULA DE PRAZO — cheio = maximo, meio = metade, vazado = nada. Na pilula: cheio = vence hoje, meio = na semana, vazado = folga. Aqui: cheio = maximo de demanda, meio = metade do caminho, vazado = nao resta nada. E a mesma lingua, que e o que a lei manda. FORA DE PRAZO E ARQUIVO SAO CINZAS VIZINHOS, E E A FORMA QUE OS SEPARA — losango cheio contra circulo vazado. Se a cor fosse o canal unico seriam dois cinzas indistinguiveis, e para ~8% dos homens as tres pilulas de prazo ja sao tres cinzas. ========================================================================== */ /* --------------------------------------------------------------- tokens -- CONTRASTE MEDIDO, NUNCA DIGITADO. Os quatro numeros de cada linha sao WCAG 2.1 (luminancia relativa sRGB) contra as QUATRO superficies — --sup #FFFFFF · --bg #F6F4FA · --sup2 #F2EFF8 · --sup3 #E9E5F2 —, nunca so contra o branco: medir so contra #FFF deixa passar o que reprova sobre a superficie recuada, que e onde vivem rodape de tabela e paginador. O piso e 3:1, que e o piso de marca grafica. Refeito em 14/08/2026. O QUE MORREU, E POR QUE: o no de "fim" (#9591A5) media 2.47 em --sup3 e reprovava o piso grafico em tres das quatro superficies; o de "fora" era LITERALMENTE --r1, usando a cor do prazo vencido para dizer estado, contra "uma cor, um dono". */ :root { /* Agir e TINTA: a lei diz que acao primaria e #15141A, neutra, e Agir e exatamente o grupo que exige acao. Nao rouba matiz de territorio nenhum (violeta e ANTT, ciano e CTB, vermelho/ambar/verde sao do prazo). */ --e-agir: #15141A; /* 18.31 · 16.78 · 16.11 · 14.78 */ /* o unico azul do sistema sem dono concorrente; herda o hex do antigo no de "escritorio", que nao tinha defeito de contraste */ --e-acomp: #2F6FED; /* 4.55 · 4.17 · 4.00 · 3.67 */ /* ardosia, o hex do antigo no de "orgao", que ja passava nas quatro. NAO PODE SER VERMELHO por mais que "o que passou e ainda custa" peca: vermelho e do prazo, e o grosso de Fora de prazo e `nada a fazer` — inerte. */ --e-fora: #716E7F; /* 4.95 · 4.54 · 4.36 · 4.00 */ /* o mais silencioso que ainda passa 3:1 na superficie recuada. --fg4 (#868198) daria 3.02 em --sup3 — margem estreita demais para uma peca que aparece em 328 das 787 linhas. */ --e-arq: #7C7789; /* 4.32 · 3.96 · 3.80 · 3.49 */ /* ---- a familia SOBRE CAMPO INSTITUCIONAL ---- A barra empilhada do Painel vive dentro de `.campo--esc`, que e escuro nos DOIS temas (--inst #2A1338 no claro, #2E1745 no escuro). A familia de cima nao serve la: `--e-agir` no tema claro e TINTA (#15141A) e mede 1.09 contra o campo — invisivel, e o grupo que exige acao seria o unico que some. Sao os hexes da familia ESCURA, declarados uma vez e sem depender do tema, porque o campo nao muda de natureza quando o tema muda. Os dois numeros de cada linha sao WCAG 2.1 contra --inst claro e --inst escuro, e o piso e 3:1, o de marca grafica. ⚠ A COR NAO E O CANAL UNICO: as fatias usam quatro tons, entao quem separa uma fatia da vizinha e o vao de 2 px, e quem a NOMEIA e a legenda logo abaixo, com rotulo e valor. */ --e-agir-esc: #F3F2F6; /* 15.09 · 14.22 */ --e-acomp-esc: #6C9BFF; /* 6.22 · 5.87 */ --e-fora-esc: #878494; /* 4.61 · 4.35 */ --e-arq-esc: #7A7788; /* 3.86 · 3.64 */ /* ---- os quatro preenchimentos, declarados UMA VEZ ---- E a trava contra a deriva: nenhuma peca escreve o gradiente do no a mao. Fora deste arquivo nao existe `linear-gradient(90deg, currentColor` — e uma linha de grep, e esta na prova. */ --no-cheio: currentColor; --no-meio: linear-gradient(90deg, currentColor 50%, transparent 50%); --no-vazado: none; --no-diag: linear-gradient(135deg, currentColor 40%, transparent 43%, transparent 57%, currentColor 60%); /* OS DOIS QUE NASCERAM COM A QUINTA FORMA — 18/08/2026, task 3. --no-tracejado E O UNICO DA FAMILIA QUE NAO E FUNDO: "tracejado" e o ESTILO DA BORDA, e fundo nenhum interrompe um anel de 1,5 px. Ele guarda `dashed` para que a peca nao digite o estilo a mao, que e a mesma trava dos outros quatro. --no-riscado e o anel VAZIO cortado pela diagonal, e nao se confunde com --no-diag: aquele e o disco CHEIO com um vao (janela fechada, na pilula de prazo); este e o anel vazio com um traco por cima (o rito acabou). Os dois dizem "fechado" e sao de familias diferentes — um do prazo, outro do status —, e por isso tem geometrias diferentes. */ --no-tracejado: dashed; --no-riscado: linear-gradient(135deg, transparent 42%, currentColor 42%, currentColor 58%, transparent 58%); } /* No tema escuro a familia inverte junto com a tinta, como --acao ja faz, e mantem o piso de 3:1 contra as quatro superficies escuras (#17161D · #0E0D12 · #1E1C26 · #262432). */ html[data-tema="escuro"] { --e-agir: #F3F2F6; /* 16.12 · 17.37 · 15.08 · 13.65 */ --e-acomp: #6C9BFF; /* 6.65 · 7.16 · 6.22 · 5.63 */ --e-fora: #878494; /* 4.93 · 5.31 · 4.61 · 4.17 */ --e-arq: #7A7788; /* 4.12 · 4.44 · 3.86 · 3.49 */ } /* ------------------------------------------------ a badge de STATUS (.st) -- O que o CLIENTE edita, dentro dos cinco fechados. Herdeira direta da badge preenchida que morreu junto com o vocabulario de tratamento. justify-self:start e width:fit-content sao obrigatorios, como na .pz: `flex:none` NAO VALE EM GRID — sem os dois a badge vira item de grid, estica para a largura da coluna e o texto encosta na esquerda. */ .st { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--r-xs); font-size: 11px; font-weight: 600; letter-spacing: .01em; background: var(--sup3); color: var(--fg); flex: none; justify-self: start; width: fit-content; white-space: nowrap; } /* o no do grupo: mesmos 9 px / 1.5 px de .pz s e .est s — a mesma lingua */ .st s { text-decoration: none; width: 9px; height: 9px; flex: none; border: 1.5px solid currentColor; border-radius: 50%; } /* A COR DA FAMILIA MORA NO NO, NUNCA NO ROTULO. E isso que poe o no no piso grafico de 3:1 e o texto no piso de texto do DS, em vez de exigir 4.5:1 de uma cor de 9 px. */ .st span { color: var(--fg); } .st--agir { color: var(--e-agir); } .st--agir s { background: var(--no-cheio); } .st--acomp { color: var(--e-acomp); } .st--acomp s { background: var(--no-meio); } /* o losango nao e gradiente: e rotacao com raio zero, como a forma antiga. A FORMA sobrevive; a cor --r1, nao. */ .st--fora { color: var(--e-fora); } .st--fora s { background: var(--no-cheio); border-radius: 0; transform: rotate(45deg); } .st--arq { color: var(--e-arq); } .st--arq s { background: var(--no-vazado); } /* ⚠ O ARQUIVO LEVA PILULA COMO OS OUTROS. Havia aqui uma excecao — fundo nenhum e texto apagado — escrita quando os quatro grupos eram CHIPS de larguras diferentes numa fileira, e ali o rebaixamento se lia como peso. Numa GRADE de celulas iguais ele deixou de se ler como peso e passou a se ler como DEFEITO: quatro selos, tres com fundo e um sem. *(Decisao do operador, 18/08/2026: "o Arquivo nao tem um card de fundo um badge, ele e o unico e temos que ter um padrao".)* O rebaixamento do Arquivo continua existindo onde ele nao vira falha de padrao: na ORDEM (ele e o ultimo) e no `.chip--arq` da faixa antiga. */ /* O TOTAL — `Acervo inteiro` — nao e um grupo, e por isso nao ganha forma nova: a forma e a MESMA do vazado, e o que o separa e a cor NEUTRA, que e como esta familia ja distingue os seus ("a cor da familia mora no no"). Inventar uma quinta forma para o que nao e um quinto estado seria acrescentar palavra a uma lingua fechada. */ .st--todos { color: var(--fg3); } /* --------------------------------------------- a badge de SITUACAO (.est) -- O PAPEL, so leitura. CONTORNO NEUTRO sempre: a distincao entre situacoes vem da FORMA do no (bom = cheio, alerta = meio, neutro = vazado) e do texto, nunca de cor propria — cor de dono unico ja tem dona nesta tela (o prazo). As duas badges NUNCA dividem coluna: uma e contorno, a outra e preenchida. */ .est { display: inline-flex; align-items: center; gap: var(--e2); font-size: 12px; color: var(--fg2); min-width: 0; } .est s { text-decoration: none; width: 9px; height: 9px; flex: none; border: 1.5px solid currentColor; } .est span { color: var(--fg2); } .est--sit { color: var(--fg2); } /* SAO TRES --e-fora NESTE BLOCO, NAO UM. Trocar so o primeiro deixa as duas formas do no sem preenchimento, calado — e nada da erro. */ .est--sit s { border-radius: 50%; border-color: var(--e-fora); } .est--sit.est--bom s { background: var(--e-fora); } .est--sit.est--alerta s { background: linear-gradient(90deg, var(--e-fora) 50%, transparent 50%); } /* ======================================================== o NO do STATUS == `.bola` — DE QUEM E A BOLA. A peca da coluna 1 da lista, escrita em 18/08/2026 pela task 3. DOIS EIXOS NA MESMA MARCA, e eles respondem perguntas diferentes: FORMA = STATUS (cinco) — de quem e a bola COR = GRUPO (quatro) — o que fazer com isso ⚠ O GRUPO NAO PODE SER A FORMA, e e isso que separa esta familia da `.st--*` de cima: *Acompanhar* junta DOIS DONOS — quem protocola (`aguardando execucao`) e o orgao (`com o orgao`) —, e a pergunta da lista e exatamente essa. Na faixa dos quatro grupos a pergunta E o grupo, e la a familia de cima continua sendo a certa. ⚠ O STATUS NAO PODE SER A COR: vermelho, ambar e verde pertencem exclusivamente ao prazo, e um quinto tom disputando com a escala de urgencia apagaria os dois canais. NENHUMA COR NOVA ENTRA. Os quatro `--e-*` ja foram medidos contra as quatro superficies aqui em cima, entao nenhuma medicao nova e devida — o contraste se herda, nao se redigita. ⚠ OS DOIS EIXOS SAO MODIFICADORES DA MESMA CLASSE, E ISSO E DELIBERADO. Cada um escreve propriedades DISJUNTAS: a cor so escreve `color`, a forma so escreve `background` e `border-style`. Aninhar o no dentro de `.st--agir` (que seria o jeito obvio de herdar a cor) NAO funciona: `.st--agir s` tem especificidade (0,1,1) e ganha de `.bola--nada` (0,1,0) — o no ficaria sempre cheio, com o CSS da forma presente no arquivo e sem nada falhar. E o mesmo modo de falha do `pointer:coarse` que perdeu para um `height` declarado 200 linhas abaixo. */ /* O envelope: no + o status ESCRITO. As duas metades sao uma peca so — no sem rotulo nao se le em 9 px, rotulo sem no nao se varre. O texto e obrigatorio, e e ele que desarma o argumento contra a quinta forma. */ .dono { display: inline-flex; align-items: center; gap: var(--e2); min-width: 0; font-size: 12px; color: var(--fg); } .dono > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A MARCA DO ESCRITORIO ao lado do status — *"· com o escritorio"*, *"· pagamento"* (`bola.marca`, 13/10/2026). Ela NAO e status, e o desenho diz isso: um degrau abaixo na tinta (`--fg2`, ja medido contra as quatro superficies), sem italico e sem cor de estado — o vermelho, o ambar e o verde sao do prazo. DENTRO do `span` do rotulo, entao a reticencia corta a marca antes de cortar o status. ⚠ NA TABELA ELA DESCE PARA A SEGUNDA LINHA da celula: medido a 1280 px, a coluna *Status* tem 170 px e *"Aguardando execucao · com o escritorio"* pede 218 — ao lado, a marca saia *"· paga…"* e *"· com…"*, e as duas ficavam indistinguiveis. A linha ja tem 48 px com duas linhas nas outras celulas, entao a altura nao muda. O `·` e daqui (`::before`) e some quando ela desce. */ .dono__m { font-style: normal; color: var(--fg2); } .dono__m::before { content: '\00B7\00A0'; } .tb--itens .dono__m { display: block; } .tb--itens .dono__m::before { content: none; } /* Os mesmos 9 px / 1,5 px de `.pz s` e `.est s` — e a mesma lingua. */ .bola { text-decoration: none; width: 9px; height: 9px; flex: none; border: 1.5px solid currentColor; border-radius: 50%; } /* ---- a COR, pelo grupo ---- */ .bola--agir { color: var(--e-agir); } .bola--acomp { color: var(--e-acomp); } .bola--fora { color: var(--e-fora); } .bola--arq { color: var(--e-arq); } /* ---- a FORMA, pelo status ---- A gramatica do preenchimento e a mesma da pilula de prazo: cheio = maximo, meio = metade, vazado = nada. Aqui: cheio = e com voce, meio = decidido e falta executar, vazado = a bola saiu das suas maos. */ .bola--decisao { background: var(--no-cheio); } .bola--execucao { background: var(--no-meio); } .bola--orgao { background: var(--no-vazado); } /* ninguem tem a bola: o anel se interrompe */ .bola--nada { background: var(--no-vazado); border-style: var(--no-tracejado); } /* o rito acabou: o anel continua inteiro e um traco o corta */ .bola--fim { background: var(--no-riscado); }