/* Tela Tabelas (low-code) — lista de tabelas + painel (colunas & linhas). */ .tb-hint{font-size:12.5px;color:var(--muted);margin:-4px 0 14px} .tb-hint i{color:var(--muted)} /* A disposição (lista + conteúdo, recolher, gaveta no celular) vem do padrão `.lat` em shared/components.css — não redefinir aqui. Esta folha só diz a LARGURA que a lista de tabelas quer (`.tb-list`, logo abaixo). O que havia antes: no celular a lista virava uma grade de chips ACIMA da tabela. Ficava uma parede de botões para rolar antes de chegar no conteúdo, e piorava a cada grupo novo na lista. Virou gaveta. */ @media (max-width:820px){ .tb-panel{width:100%} } /* coluna esquerda: lista de tabelas */ .tb-list{flex:0 0 220px;max-width:220px;display:flex;flex-direction:column;gap:6px} .tb-list-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px} /* botões "+ nova"/"+ conexão"/"+ linha" compactos e do MESMO tamanho (não quebram em 2 linhas) */ .tb-list-hd .btn-add,.tb-tools .btn-add{padding:3px 9px;font-size:11px;border-radius:6px;white-space:nowrap;flex:none} .tb-titem{display:flex;flex-direction:column;gap:1px;text-align:left;padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer;font-family:inherit} .tb-titem:hover{border-color:var(--brand)} .tb-titem.on{border-color:var(--brand);background:#eef3fc} .tb-titem>span:first-child{font-weight:600;font-size:13px;color:var(--ink)} .tb-titem-k{font-size:10.5px;color:var(--muted);font-weight:500} /* painel direito */ .tb-panel{flex:1;min-width:0} .tb-panel.tb-empty{color:var(--muted);padding:24px;text-align:center;border:1px dashed var(--line);border-radius:12px} .tb-panel-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .tb-panel-hd h2{font-size:18px;margin:0} .tb-panel-hd h2 .tb-titem-k{margin-left:6px} .tb-panel-act{display:flex;gap:8px;align-items:center} /* TELA ESTREITA: título e botões de ação lado a lado não cabem — o bloco de ações desce para a linha de baixo em vez de empurrar a tela para fora. */ @media(max-width:600px){ .tb-panel-hd{flex-wrap:wrap;gap:8px} .tb-panel-hd h2{flex:1 0 100%;min-width:0;overflow-wrap:anywhere} .tb-panel-act{flex-wrap:wrap} } .tb-del{color:#c0392b} /* meta do índice (código/chave) sob o cabeçalho da tabela */ .tb-panel-meta{margin:-4px 0 10px} .tb-meta{font-size:12px;color:var(--muted)} .tb-meta b{color:var(--ink)} /* coluna Código (índice da linha) + chave única (🔑) */ .tb-cod{font-weight:800;font-size:11.5px;letter-spacing:.3px;color:var(--brand);white-space:nowrap} .tb-thcod .tb-thname{font-weight:800} .tb-thkey .tb-thname{color:#ffe08a} .tb-tipo{font-style:normal;font-size:10.5px;color:var(--muted);font-weight:600} .tb-mt{margin-top:16px} /* Ações da linha (✎ / ×) na PRIMEIRA coluna — padrão da plataforma. Largura 1% = "só o necessário", para não roubar espaço das colunas de dado. */ .tb-rowact{white-space:nowrap;text-align:left;width:1%} .tb-rowact .iconbtn{width:26px;height:26px;margin-right:4px;vertical-align:middle} .tb-rowact .iconbtn .ic{width:13px;height:13px} .tb-thact{width:1%} /* Anexo na célula: um chip por arquivo, clicável. O nome longo é cortado com reticências para uma coluna de anexo não esticar a tabela inteira. */ .tb-anxcel{white-space:nowrap} .tb-anx{display:inline-flex;align-items:center;gap:4px;max-width:160px;margin:1px 4px 1px 0; font-family:inherit;font-size:11px;font-weight:600;color:var(--brand); background:var(--brand-soft);border:1px solid var(--line);border-radius:6px;padding:2px 7px;cursor:pointer} .tb-anx span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tb-anx:hover{border-color:var(--brand);text-decoration:underline} .tb-anx svg{flex:none} /* A barra de ferramentas QUEBRA EM LINHAS. Sem isso ela é uma fila rígida: com o seletor de linhas por página somaram-se 464px de botões numa janela de 344px (Fold fechado), e a fila inteira saía pela direita. `overflow-x:clip` no body esconde o estrago, não o conserta — a página que desliza tira o cartão (`position:fixed`) do campo de visão. */ .tb-tools{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:6px 10px} .tb-count{font-size:11px;color:var(--muted);white-space:nowrap} /* cabeçalho é azul (thead th = brand/branco). No hover EXALTAMOS texto/símbolos, nunca o fundo (senão fundo+texto ficam brancos e somem). */ .tb-th{cursor:pointer;user-select:none;white-space:nowrap} .tb-thname{font-weight:700} .tb-th:hover .tb-thname{text-decoration:underline} .tb-caret{margin-left:6px;font-size:10px;color:rgba(255,255,255,.5)} /* ⇅ discreto no azul */ .tb-th:hover .tb-caret{color:rgba(255,255,255,.95)} .tb-caret.on{color:#fff} /* ▲/▼ ativo, forte */ .tb-thcfg{margin-left:7px;background:none;border:0;cursor:pointer;color:rgba(255,255,255,.65);font-size:12px;line-height:1;padding:0 2px} .tb-th:hover .tb-thcfg{color:#fff} .tb-thcfg .ic{width:11px;height:11px;vertical-align:-1px} /* mover coluna ◀ ▶ (reordenar) — discretos no azul, fortes no hover */ .tb-thmoves{margin-left:6px;display:inline-flex;gap:1px} .tb-thmove{background:none;border:0;cursor:pointer;color:rgba(255,255,255,.55);font-size:10px;line-height:1;padding:0 3px} .tb-th:hover .tb-thmove{color:rgba(255,255,255,.9)} .tb-thmove:hover:not([disabled]){color:#fff} .tb-thmove[disabled]{opacity:.25;cursor:default} .tb-thadd{width:1%;white-space:nowrap;text-align:right} .tb-thadd .btn-add{background:#fff;color:var(--brand);padding:4px 9px;font-size:11px;border-radius:6px} /* branco sobre o azul */ /* linha de filtros (uma por coluna) — barra clara sob o cabeçalho azul */ .tb-frow th{position:static;background:#eef3fc;padding-top:5px;padding-bottom:6px} .tb-fcol{width:100%;box-sizing:border-box;font-family:inherit;font-weight:400;font-size:11.5px;border:1px solid var(--line);border-radius:6px;padding:3px 7px;background:#fff} .tb-fcol:focus{outline:none;border-color:var(--brand)} .tb-nocols{padding:18px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px} /* ---------------- Tabelas INTEGRADAS (Oracle) — protótipo/simulação ---------------- */ /* 2º grupo da lista, com respiro do grupo de cima */ .tb-list-hd2{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)} /* dot de status na lista (ok/erro/off/rodando) */ .tb-dot{width:8px;height:8px;border-radius:99px;flex:none;display:inline-block;margin-right:6px} .tb-dot-ok{background:#2fa35c} .tb-dot-err{background:#d43a47} .tb-dot-off{background:#b6bfcc} .tb-dot-run{background:#e3a72c;animation:tbpulse 1s infinite alternate} @keyframes tbpulse{from{opacity:.4}to{opacity:1}} /* selo de protótipo */ .tb-sim-badge{font-size:9px;font-weight:800;letter-spacing:.4px;color:#7a5a10;background:#fdf3d7;border:1px solid #eadfae;border-radius:5px;padding:1px 6px;text-transform:uppercase;white-space:nowrap} /* status do espelho/conexão — EMPILHADO (grade rótulo | valor): cada informação numa linha, fácil de ver onde começa e termina */ .tb-itg-status{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;align-items:baseline;font-size:12px;color:var(--ink);background:#f6f8fc;border:1px solid var(--line);border-radius:9px;padding:8px 12px} .tb-itg-status b{color:var(--ink)} .tb-st-l{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);white-space:nowrap} .tb-st-v{min-width:0} .tb-itg-st{font-weight:800} .tb-itg-ok{color:#157a39} .tb-itg-err{color:#c01f2c} .tb-itg-run{color:#8a6a12} .tb-itg-errmsg{font-size:11px;color:#c01f2c;background:var(--red-soft,#fdecec);border-radius:6px;padding:1px 7px;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tb-itg-off{font-weight:800;color:#8a6a12} .tb-itg-agenda{font-size:11px;color:var(--muted);white-space:nowrap} /* modal: log de execuções + detalhes da linha */ .tb-itg-logtb{width:100%;border-collapse:collapse;font-size:12px} /* cabeçalho no padrão do app: azul com fonte BRANCA (o muted sumia no azul) */ .tb-itg-logtb th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;color:#fff;padding:6px 10px;border-bottom:1px solid var(--line)} .tb-itg-logtb td{padding:6px 8px;border-bottom:1px solid #eef1f6;vertical-align:top} .tb-itg-det{display:flex;justify-content:space-between;gap:14px;padding:5px 2px;border-bottom:1px solid #eef1f6;font-size:12.5px} .tb-itg-det span{color:var(--muted)} /* botão de notificações: sino chapado igual ao do opt-in (acessos.js), alinhado à linha de base do texto e na cor âmbar do "recebe avisos" */ .tb-notif svg{vertical-align:-2px;margin-right:2px} .tb-notif{color:var(--amber)} /* ---------- notificações da tabela (fase 2) ---------- Duas telas: a lista das três situações e o editor de uma delas. O editor repete o MESMO bloco de destinatários no padrão da regra e dentro de cada condição — por isso os estilos abaixo valem para os dois lugares. */ .tb-nt-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 8px} .tb-nt-hd b{font-size:13px;color:var(--ink)} .tb-nt-mut{font-size:11.5px;color:var(--muted)} .tb-nt-tpl{font-size:12px;font-weight:700;color:var(--brand)} .tb-nt-alc{font-size:12px} /* recebedores: cartões do que já foi montado + assistente passo a passo */ .tb-rc{border:1px solid var(--line);border-radius:10px;background:#fbfcfe;padding:11px 12px} .tb-rc-cards{display:flex;flex-direction:column;gap:6px;margin-bottom:10px} .tb-rc-card{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line); border-left:3px solid var(--brand);border-radius:9px;padding:7px 10px;font-size:12.5px} .tb-rc-txt{font-weight:700;color:var(--ink);flex:1;min-width:0} .tb-rc-n{font-size:11.5px;color:var(--muted);white-space:nowrap} /* a migalha é o que diz DE QUE recebedor é o passo na tela; sem ela o terceiro passo aparece solto */ .tb-rc-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:11px;margin-bottom:8px} /* cada migalha é um botão: clicar volta para aquela escolha */ .tb-rc-crumb button{font-family:inherit;font-size:11px;font-weight:700;color:var(--brand); background:none;border:0;border-radius:5px;padding:2px 5px;cursor:pointer} .tb-rc-crumb button:hover{background:var(--brand-soft);text-decoration:underline} .tb-rc-crumb span{color:var(--muted);font-weight:400} .tb-rc-wz{border:1px dashed var(--line);border-radius:9px;background:var(--card);padding:10px 11px} .tb-rc-q{font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:8px} .tb-rc-ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:7px} .tb-rc-op{display:block;text-align:left;font-family:inherit;background:var(--card);border:1px solid var(--line); border-radius:9px;padding:8px 10px;cursor:pointer} .tb-rc-op:hover{border-color:var(--accent);background:var(--brand-soft)} .tb-rc-op b{display:block;font-size:12.5px;color:var(--ink)} .tb-rc-op small{display:block;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35} /* a multi-escolha é o componente do app (App.multiSelect) — mesmos chips e mesma busca dos campos de cartão e dos filtros */ .tb-rc-wz .msel{margin-bottom:2px} .tb-rc-acts{display:flex;align-items:center;gap:12px;margin-top:8px} .tb-rc-fim{display:flex;align-items:center;gap:12px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)} .tb-rc-total{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);font-size:12px} /* condições */ .tb-nt-cond{border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;background:var(--card);padding:10px 12px;margin-bottom:10px} .tb-nt-cond-hd{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .tb-nt-cond-hd b{font-size:12px} /* `width` explícito: o CSS de modal deixa select/input em 100%, e aí a frase "Se " virava três linhas empilhadas */ .tb-nt-cond-hd select,.tb-nt-cond-hd input{width:auto;font-family:inherit;font-size:12.5px; padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)} .tb-nt-cond-hd select{flex:0 1 auto;min-width:120px;max-width:230px} .tb-nt-cond-hd input{flex:1 1 120px;min-width:110px} .tb-nt-cond-hd .lnk-rm{margin-left:auto} .tb-nt-cond-bd{margin-top:9px} .tb-nt-then{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin-bottom:5px} #tb-nt-addcond{margin-top:2px} /* escolha atual marcada: ao voltar para um passo, ela precisa estar visível — senão a tela pede de novo algo que já foi respondido */ .tb-rc-op.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)} /* alcance: pessoa = quantas a seleção acha · sino = quantas recebem hoje */ .tb-mx{display:inline-flex;align-items:center;gap:3px;font-weight:800;font-size:12px;color:var(--ink);margin-right:10px} .tb-mx svg{color:var(--muted)} /* zero recebendo é o caso que pede ação (cadastro incompleto), então não pode passar batido no meio de dois números pretos */ .tb-mx-0{color:var(--muted)} .tb-mx-0 svg{color:var(--amber)} /* conferência da coluna: quais valores casam com o cadastro e quantos alcançam */ .tb-rc-chk{margin-top:8px;font-size:11.5px;color:var(--muted)} .tb-rc-chk-hd{font-weight:700;color:var(--ink);margin-bottom:5px} .tb-rc-chk-l{display:flex;flex-wrap:wrap;gap:5px} .tb-rc-chk-i{display:inline-flex;align-items:center;gap:4px;background:var(--green-soft);color:#1c5d34; border-radius:6px;padding:2px 7px;font-size:11px;font-weight:600} /* valor sem correspondência não é erro de configuração — é cadastro. Fica em âmbar (atenção), não em vermelho (falha) */ .tb-rc-chk-i.off{background:var(--amber-soft);color:#7a5600} .tb-rc-chk-i svg{color:currentColor} .tb-rc-wz select[data-rccol]{width:100%;font-family:inherit;font-size:12.5px;padding:6px 8px; border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)} /* Histórico da linha: reaproveita o visual do histórico do cartão (`.cp-*`, em components.css). O código só aparece na lista de EXCLUÍDAS — ali a linha não existe mais, e sem ele não dá para saber qual era. */ .tb-hist-cod{font-size:11px;font-weight:800;letter-spacing:.3px;color:var(--brand);margin:12px 0 -4px} .tb-hist-cod:first-child{margin-top:0} .tb-exc{color:var(--muted)} .tb-exc:hover{color:var(--brand)} /* `.tb-uso` (aviso de "em uso, não dá para excluir") mudou para shared/components.css: é o mesmo aviso em tabela, coluna e campo. */ /* Etapa na grade de processo: código e nome são UMA informação — quebrar a linha entre os dois faria o código parecer sobra da linha de cima. */ .tb-cel-etapa{white-space:nowrap} /* Páginas: moram na MESMA linha da contagem, em cima da tabela. As setas são quadradas e estreitas — ao lado de "exportar" elas são navegação, não ação. */ .tb-pager{display:inline-flex;align-items:center;gap:4px} .tb-pager .rowbtn{padding:3px 8px;font-size:13px;line-height:1} /* Código dentro da etiqueta da etapa: mesma etiqueta, peso diferente. Separado num contorno próprio, lia como dois estados na mesma célula. */ .tb-etapa-cod{opacity:.7;font-weight:800;letter-spacing:.2px} /* Título do processo e ferramentas na MESMA linha, encostados no topo. O rótulo "Cartões" saiu: repetia o que o título já diz e cobrava uma faixa inteira. */ .tb-panel-hd1{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:0} .tb-panel-hd1 > h2{margin:0} .tb-panel-hd1 .tb-tools{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:6px 8px;margin-left:auto} /* Botão só de ÍCONE (sino, engrenagem, ×). O rótulo escrito é o que estourava a linha quando tudo subiu para o título; os três desenhos se reconhecem sozinhos e o nome continua no `title`, para quem passar o mouse. */ /* Mesmo tamanho de alvo do .iconbtn das linhas (30px): botao de icone menor que isso vira mira, e o × era o pior deles. */ .tb-so-ic{width:30px;height:30px;padding:0;display:inline-flex;align-items:center; justify-content:center;line-height:1;font-size:15px;font-weight:700} .tb-so-ic svg{width:15px;height:15px} /* O topo da tela. O título "Tabelas" ocupa uma faixa inteira (medido: y 82-110) e o painel começava só em 116 — sobrava a faixa toda vazia à direita do título. O painel SOBE para dentro dela; a lista fica onde está, logo abaixo do título, que é o lugar dela. Só no computador: no celular a lista é gaveta e o painel ocupa a largura toda, entao subir cobriria o título. */ /* O painel sobe 34px e passa a COBRIR a faixa do título. O recuo do cabeçalho deixa o espaço visualmente livre, mas o elemento continua por cima e engolia o clique do botão de recolher. O título vai para a frente. */ /* O título fica na frente para o botão de recolher receber o clique — mas ele é um bloco de largura INTEIRA, e o painel sobe 34px para essa mesma faixa. Sem `pointer-events`, o título engolia os cliques da barra (filtro, exportar, paginação) em toda a largura. Só os FILHOS (o botão e o ⓘ) capturam; o resto deixa passar. */ #tb-h1{margin:0 0 6px;position:relative;z-index:2;pointer-events:none} #tb-h1 > *{pointer-events:auto} .tb-wrap{margin-top:0} @media(min-width:821px){ /* As duas medidas da tela ficam AQUI, com nome, porque três regras dependem delas (o painel, o quanto ele sobe e a altura da lista). Repetir o número em cada uma é o jeito garantido de uma ficar para trás. */ .tb-wrap{--tb-sobe:34px;--tb-alt:calc(100vh - 104px)} .tb-wrap > .tb-panel{margin-top:calc(-1 * var(--tb-sobe))} /* Com a lista RECOLHIDA o painel ocupa a largura toda e subia em cima do título "Tabelas" e do botão de recolher. Medido: o título vai de 128 a 267, entao o cabecalho do painel comeca depois disso. Só o CABEÇALHO recua — a tabela abaixo continua usando a largura inteira. */ .tb-wrap.lat-off > .tb-panel > .tb-panel-hd1{padding-left:155px} } /* Cabeçalho de grupo recolhível: a linha inteira é o alvo do clique, e a seta diz o estado. */ .tb-grp{cursor:pointer;display:flex;align-items:center;justify-content:flex-start;gap:7px;user-select:none} /* o "+ nova" continua encostado na direita; o título fica junto da seta */ .tb-grp > .btn-add{margin-left:auto} .tb-grp:hover{color:var(--brand)} .tb-grp-cv{font-size:10px;color:var(--muted);width:10px;flex:none} /* Painel de filtros: abre abaixo do título, acima da tabela — não é popover flutuante porque aqui ele convive com a grade, que já rola sozinha. */ .tb-filtros{margin-top:10px;padding:12px 14px} .tb-filtros .q-grp{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 14px;margin-top:10px} .rowbtn.on{border-color:var(--brand);background:var(--brand-soft)} /* Painel de COLUNAS (mostrar/ocultar): mesmo lugar e mesma moldura do painel de filtros — abre abaixo do título, acima da grade. São dois painéis irmãos que respondem a perguntas vizinhas ("quais linhas?" / "quais colunas?"), então abrir em lugares diferentes só faria procurar. */ .tb-cols{margin-top:10px;padding:12px 14px} .tb-cols-hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px} /* Dentro do painel de FILTROS a faixa é a primeira coisa da caixa: ela explica os olhos que vêm logo abaixo, então precisa se separar do que vem depois. */ .tb-filtros .tb-cols-hd{padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--linha,#e6eaf0)} .tb-cols-ttl{font-weight:600} /* Quem altera aqui altera para todo mundo. O aviso fica no painel, não só na dica do botão: dica de passar o mouse não existe no celular, e é justamente quem nunca abriu isto que precisa ler. */ .tb-cols-sub{font-size:12px;color:var(--muted)} .tb-cols-bts{margin-left:auto;display:flex;gap:6px} .tb-cols-vazio{margin:0;color:var(--muted);font-size:13px} .tb-cols-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 14px;margin-top:10px} .tb-cols-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;cursor:pointer;min-width:0} .tb-cols-item:hover{background:var(--brand-soft)} .tb-cols-item input{flex:none;margin:0} /* O nome pode ser longo e a caixa é estreita: cortar com reticências mantém a grade de duas/três colunas em pé — o title devolve o nome inteiro. */ .tb-cols-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Quem encolhe primeiro é o TIPO, não o nome: o tipo é pista, o nome é o que se procura. Sem isto "Seleção (de outra tabela)" espremia o nome ao lado até sobrar "Prod…". */ .tb-cols-tipo{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--muted)} /* Oculta continua LEGÍVEL, só apagada: ela é o que se veio reexibir, e texto fraco demais viraria caçada. */ .tb-cols-item.off .tb-cols-nome{color:var(--muted)} .tb-colsn{font-size:11px;color:var(--muted)} .rowbtn.on .tb-colsn{color:inherit} /* ---- A TABELA CABE NA TELA ---- O `.tablewrap` do padrão tem altura máxima FIXA (640px). Somada ao cabeçalho e à barra, ela estoura a janela em tela menor — e aí quem rola é a PÁGINA inteira: a tabela sobe junto e o cabeçalho dela sai de vista, que é o oposto do que o cabeçalho grudento existe para fazer. Aqui o painel passa a ocupar a altura disponível e a grade fica com o que sobra. Rolagem só em dois lugares: a lista de tabelas (que já tem a sua) e os DADOS. Só no computador — no celular a página rolar é o comportamento certo, e a gaveta cobre a tela de qualquer jeito. */ @media(min-width:821px){ .tb-panel{display:flex;flex-direction:column;height:var(--tb-alt);min-height:320px} .tb-panel > #tb-grade{flex:1;min-height:0;display:flex;flex-direction:column} .tb-panel > #tb-grade > .tablecard{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:10px} .tb-panel > #tb-grade > .tablecard > .tablewrap{flex:1;min-height:0;max-height:none} /* O painel de filtros não empurra a tabela para fora: ele tem o próprio limite e rola por dentro quando a tela é baixa. */ .tb-filtros{flex:none;max-height:42vh;overflow-y:auto} /* Mesmo limite do painel de filtros, pela mesma razão: tabela com 40 colunas (as integradas chegam lá) encheria a tela inteira de caixinhas e empurraria a grade para fora. */ .tb-cols{flex:none;max-height:42vh;overflow-y:auto} /* A LISTA termina onde a tabela termina. O padrão `.lat` dá à lista uma altura máxima contada da janela (`100vh - 84px`), pensada para quando a PÁGINA rola: o que passa do fim da tela se alcança rolando. Aqui a página não rola mais — então a sobra virava um pedaço inalcançável (medido: a lista ia até 832 numa janela de 800, e a página voltava a rolar 50px só por causa dela). A altura vem do PAINEL, não da lista: a linha recebe a altura do painel menos o quanto ele sobe, e a lista estica para ela. Só tirar o limite não resolve — sem altura na linha, quem manda passa a ser o item mais alto (a própria lista), e ela cresce ainda mais (medido: 1.412). */ .tb-wrap{align-items:stretch;height:calc(var(--tb-alt) - var(--tb-sobe))} .tb-wrap > .tb-list{max-height:100%;min-height:0} } /* ---- EDIÇÃO NA TABELA DE PROCESSO ---- Modo com botão para abrir e botão para salvar: nada é gravado enquanto se digita. O visual precisa deixar isso óbvio — célula editável parece campo, linha mexida se destaca, e o contador diz quanto está pendente. */ .tb-edbar{display:inline-flex;align-items:center;gap:8px} .tb-edcount{font-size:11px;color:var(--muted);white-space:nowrap} .tb-edcount.on{color:var(--brand);font-weight:800} .tb-edcel{font:inherit;font-size:12px;width:100%;box-sizing:border-box;border:1px solid var(--line); border-radius:6px;padding:3px 6px;background:#fff;color:var(--ink)} .tb-edcel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)} .tb-edck{width:auto} .tb-edetapa{min-width:150px} /* Célula que não se edita AQUI: fica legível e claramente inerte. Some-la ou deixá-la igual às outras seriam os dois erros — no primeiro o dado somia, no segundo o clique não reage e parece defeito. */ .tb-celoff{display:inline-block;opacity:.55;cursor:help} /* linha com alteração pendente: a marca fica na PRIMEIRA célula, que é a que sobrevive à rolagem lateral (as duas primeiras colunas são congeladas) */ .tb-linha-ed > td{background:#fffdf2} .tb-linha-ed > td:first-child{box-shadow:inset 3px 0 0 var(--amber)} /* A caixa de confirmação (.tb-cf-*) mudou para shared/components.css: ela é usada por DUAS telas agora (a tabela e o cartão aberto pelo ✎ dela), e o desenho de um componente compartilhado não pode morar na folha de uma delas. */ /* ---- LARGURA DE COLUNA E LEITURA DA CÉLULA ---- `table-layout:fixed` é o que faz a largura declarada no VALER; sem ele o navegador distribui como quiser e o arrasto não teria efeito. Com ela vem o outro ganho: a célula QUEBRA EM LINHAS em vez de espremer tudo numa só — que era o que estragava a leitura no modo de edição, com o campo virando "Configu…" e a lista cortada no meio da palavra. */ /* `table-layout:fixed` é o que faz a largura do VALER. A largura da TABELA é escrita em px pelo JS (a soma das colunas): com `max-content` o navegador calculava pelo conteúdo e distribuía a sobra entre as colunas — medido, a Etapa pedia 180px e saía com 231, e arrastá-la não mudava nada, porque a distribuição desfazia o ajuste. */ /* `--tb-ico` é a caixa dos ícones do cabeçalho. Um token só, para os três ficarem do mesmo tamanho por construção — e para mudar o tamanho num lugar. */ .tb-fixa{table-layout:fixed;--tb-ico:20px} /* CÉLULA: quebra linha por padrão, e o que não quebra fica CONTIDO. Sem o `overflow:hidden` o conteúdo que não cabe (uma etiqueta, que é `nowrap` por natureza) transborda para a coluna vizinha e escreve por cima dela — foi o que aconteceu entre SubProjeto e Produto 2. */ .tb-fixa td{white-space:normal;overflow-wrap:anywhere;vertical-align:top;overflow:hidden} /* Etiqueta dentro de célula de tabela quebra em linhas. Fora da tabela ela continua `nowrap`, que é o certo lá (etiqueta solta no meio de um texto). */ .tb-fixa td .pill{white-space:normal;overflow-wrap:anywhere;max-width:100%} /* Nada dentro da célula passa da largura dela. */ .tb-fixa td > *{max-width:100%} /* Rede para o que NÃO pode quebrar (código, nome de arquivo): reticências, para quem lê saber que há mais texto — em vez de o corte parecer o valor inteiro. A ordem de preferência é: quebrar linha; se não der, "…". */ .tb-fixa td .tb-cod{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom} /* A grade de processo tem UM botão na coluna de ações; a margem à direita sobrava e empurrava a célula 4px além da própria largura. */ .tb-fixa .tb-rowact .iconbtn:last-child{margin-right:0} /* MESMA armadilha no chip de anexo, e ela some da vista: `max-width:100%` limita a BORDA, não a margem. O chip esticava até os 100% e os 4px de margem (que separam um chip do outro) caíam FORA da célula — medido, 194px de conteúdo em 190px de coluna, em toda linha com nome de arquivo longo. Descontar a margem da largura máxima resolve sem tirar o respiro entre dois chips. */ .tb-fixa td .tb-anx{max-width:calc(100% - 4px)} /* O cabeçalho fica numa linha só (é curto; quebrar ali só engorda a tabela). `position:relative` é o berço do punho de largura — mas SEM `#id` no seletor: com ele esta regra vencia a do padrão `.tb-congela`, que põe `sticky` nas duas primeiras colunas, e o congelamento morria em silêncio (medido: a coluna de ações voltou a `position:relative`). Menos específico aqui = o congelamento continua ganhando onde deve. */ /* Cabeçalho em três peças, nesta ordem e nesta largura: punho · ordenação · nome. As duas primeiras têm largura FIXA, então ficam na mesma coordenada em todas as colunas — era isso que se perdia quando o nome vinha primeiro. O nome é o único que estica, e QUEBRA EM LINHAS: título cortado obriga a passar o mouse para saber de que coluna se trata. */ /* NÃO declarar `position` aqui. O padrão (`thead th`, components.css) já usa `position:sticky;top:0` — é o que mantém o cabeçalho à vista ao rolar para baixo. Pôr `relative` nesta regra, que é mais específica, desligava o grudento de TODAS as colunas menos as duas congeladas (que têm regra própria, ainda mais específica): rolando a lista, só CÓDIGO e a coluna de ações continuavam no lugar. `sticky` já é elemento posicionado, então o punho de largura (absolute) se ancora nele do mesmo jeito. */ /* `middle`: ícones e título CENTRADOS na altura da faixa azul. Com `top` o conjunto encostava no teto e sobrava um vão embaixo — some numa coluna de título curto e salta à vista na linha inteira. */ .tb-fixa thead th{overflow:hidden;white-space:normal; vertical-align:middle;padding-left:7px;padding-right:15px} /* O flex fica no INVÓLUCRO, nunca no : flex no tira dele o `display:table-cell`, e aí a largura declarada no para de valer — cabeçalho e corpo sairiam desalinhados. */ .tb-fixa thead th .tb-thin{display:flex;align-items:center;gap:3px} /* OS TRÊS ÍCONES SÃO UMA COISA SÓ: mesma caixa (--tb-ico), mesma cor do título (branco, sem transparência) e o desenho centrado dentro dela. Cada um vinha de uma origem diferente — o punho do padrão compartilhado, a seta daqui, a engrenagem do botão — e saíam com três tamanhos e três tons de branco, que é o que dava o ar de rascunho. O tamanho do DESENHO varia por glifo (⠿ e ⇅ ocupam menos da sua caixa que a engrenagem); o que tem de bater é o que se vê, não o `font-size`. */ .tb-fixa thead th .tb-thin > .arr-punho, .tb-fixa thead th .tb-thin > .tb-caret, .tb-fixa thead th .tb-thin > .tb-thslot{ flex:0 0 var(--tb-ico,20px);width:var(--tb-ico,20px);height:var(--tb-ico,20px); min-width:0;min-height:0;padding:0;margin:0;line-height:1; display:flex;align-items:center;justify-content:center;color:#fff} .tb-fixa thead th .arr-punho{font-size:16px;letter-spacing:0} .tb-fixa thead th .arr-vazio{visibility:hidden} /* A seta ATIVA (▲/▼) já se distingue da inativa (⇅) pelo DESENHO — não precisa de cor própria, e ter uma quebrava o pedido de "todos da cor do título". */ .tb-fixa thead th .tb-caret{font-size:15px} /* Espaço da AÇÃO da coluna (a engrenagem, nas tabelas da plataforma). Largura FIXA, e reservada mesmo onde a ação não existe — senão a coluna Código, que não tem engrenagem, começaria o nome 22px antes das outras. */ .tb-fixa thead th .tb-thslot .tb-thcfg{margin:0;padding:0;color:inherit;display:flex} .tb-fixa thead th .tb-thslot .tb-thcfg .ic{width:14px;height:14px;vertical-align:0} .tb-fixa thead th .tb-thname{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.3;margin-left:3px} /* Marca da coluna-chave: SVG com `currentColor`, nunca o emoji 🔑 — emoji cai na fonte colorida do celular/tablet e sai amarelo-e-cinza, ignorando a cor da coluna (a regra do projeto, e aqui ela aparecia na tela do usuário). */ .tb-fixa thead th .tb-thkey-ic{width:12px;height:12px;flex:none;margin-right:4px;vertical-align:-1px} /* Punho de largura: faixa na borda direita do cabeçalho, com um traço VISÍVEL no meio — sem ele não há como adivinhar que dá para arrastar ali. `touch-action:none` para o dedo arrastar em vez de rolar a tabela. */ .tb-larg{position:absolute;top:0;right:0;width:12px;height:100%;cursor:col-resize; touch-action:none;user-select:none;display:flex;align-items:center;justify-content:center} .tb-larg::before{content:'';width:2px;height:16px;border-radius:2px;background:rgba(255,255,255,.45)} .tb-larg:hover::before{background:#fff;height:22px} .tb-larg:hover{background:rgba(255,255,255,.12)} /* NO DEDO o alvo dobra de largura. 12px é medida de ponteiro de mouse; a ponta do dedo cobre perto de 40px, e tentar acertar 12 termina em clique no cabeçalho — que ORDENA a coluna. Some o hover (não existe no toque) e o traço fica sempre visível, senão não há como saber que dá para arrastar ali. */ @media (pointer: coarse){ .tb-larg{width:26px} .tb-larg::before{background:rgba(255,255,255,.7);height:20px} } /* Punho de ARRASTAR a coluna (os seis pontos). Só o CURSOR mora aqui: tamanho e cor saem da regra dos três ícones, acima. Este seletor tem `#id` e por isso vence QUALQUER regra de classe — foi assim que ele segurou o punho num tom e num tamanho diferentes dos vizinhos mesmo depois de o padrão ter sido escrito. Não devolver `color`/`font-size` para cá. */ #tb-grade thead .arr-punho{cursor:grab} /* No modo de edição o campo ocupa a coluna inteira. Texto usa