/* O widget `tabela` (FeitoWeb.Widgets.Tabela, docs/telas.md §2). A tabela com ordenação, seleção e ações em lote.
   Trazido da casca na etapa 1 (26/10/2026): o table.t e a .tabela-wrap (style.css) e o th .th-ordem da lista do
   Gestão; a zebra e o cabeçalho do visual novo continuam no visual.css, a fonte no fonte.css e o acrílico no
   temas.css. A ficha (table.t.ficha) usa este desenho também. Regra (docs/telas.md §4, o teste test/feito_web/widgets_regra_test.exs): cor só por token (var(--…), com a cor de
   hoje como reserva); cor nova é token novo, no style.css (claro) e no temas.css (escuro e acrílico). Ligado no layout
   raiz logo depois do style.css (FeitoWeb.Widgets.folhas/0): as camadas da casca (visual.css, componentes.css,
   navegacao.css, temas.css, fonte.css e a escala gerada por `mix casca.escala`) vestem por cima, como vestem tudo.
   Mudou este arquivo: `mix casca.escala` (o ./servidor faz sozinho). */

/* — de style.css */
.tabela-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.t th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; color: var(--suave); border-bottom: 2px solid var(--linha); padding: 7px 8px; background: var(--verde-fundo); position: sticky; top: 0; }
table.t td { border-bottom: 1px solid var(--e-linha, #edf2ee); padding: 6px 8px; vertical-align: middle; }
table.t tr.grupo td { background: var(--verde-claro); font-weight: 700; color: var(--verde-esc); font-size: .8rem; text-transform: uppercase; }
table.t .dir { text-align: right; white-space: nowrap; }
table.t input[type=text] { padding: 5px 7px; }
table.t input.valor { width: 100px; text-align: right; }
table.t input.prazo { width: 150px; }
table.t td, table.t th { vertical-align: top; }
th .th-ordem { color: inherit; text-decoration: none; }
th .th-ordem:hover { text-decoration: underline; }

/* — novo (etapa 1) */
/* o cabeçalho que ordena: o rótulo e a seta da coluna que ordena agora; sem endereço, o mesmo desenho num botão */
th .th-ordem { display: inline-flex; align-items: center; gap: var(--v-esp-1, 4px); }
th button.th-ordem { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit;
  text-transform: inherit; cursor: pointer; }
th .th-seta { flex: none; }
table.t .tabela-centro { text-align: center; }
/* o destaque da linha (F6, 26/10/2026: saiu do acessos.css, o fim do cadastro): a sugerida pela IA em azul, a mudada
   pela pessoa em amarelo — as mesmas cores da célula da matriz (widgets/matriz.css) */
tr.ac-mudada > td { background: color-mix(in srgb, var(--amarelo-f) 80%, transparent); }
tr.ac-sugerida > td { background: color-mix(in srgb, var(--azul-f) 55%, transparent); }
/* a linha que abre o registro: a mão, o fundo ao passar e o link da coluna com a cor do texto */
table.t tr[data-abrir] { cursor: pointer; }
table.t tr[data-abrir]:hover > td { background-color: var(--e-sutil, #eef1f0); }
table.t .tabela-abrir { color: inherit; font-weight: 600; text-decoration: none; }
table.t .tabela-abrir:is(:hover, :focus-visible) { color: var(--verde-esc); text-decoration: underline; }
/* a caixa de marcar e a linha marcada (a cor não é o único sinal: a caixa diz) */
table.t .tabela-sel { width: 1%; text-align: center; vertical-align: middle; white-space: nowrap; cursor: default; }
table.t .tabela-sel input { margin: 0; accent-color: var(--verde); cursor: pointer; }
table.t tr:has(> td.tabela-sel > input:checked) > td { background-color: var(--verde-claro); }
/* as ações em lote: aparecem com algo marcado, grudadas à esquerda (não rolam de lado com a tabela larga) */
.tabela-lote { position: sticky; left: 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--v-esp-2, 8px); margin-bottom: var(--v-esp-2, 8px); padding: var(--v-esp-2, 8px) var(--v-esp-3, 12px);
  border: 1px solid var(--linha); border-radius: var(--v-raio-ctrl, 8px); background: var(--verde-claro);
  color: var(--verde-esc); }
.tabela-lote-conta { margin-right: auto; }
/* o vazio: a linha do «Nada por aqui.» (ou do slot :vazio), com respiro */
table.t tr.tabela-vazia > td { padding: var(--v-esp-4, 16px) var(--v-esp-2, 8px); }
/* a densidade compacta, escolha de cada pessoa na abinha de aparência (o data-densidade da página; docs/telas.md
   §7: confortável por padrão) */
:root[data-densidade="compacta"] table.t:not(.ficha) td { padding-block: 3px; }
:root[data-densidade="compacta"] table.t:not(.ficha) th { padding-block: 4px; }

/* — a grade (modo="grade", 26/10/2026: os arquivos do Drive em blocos): os blocos do mesmo tamanho, quantos couberem
   na linha (um por linha no celular estreito), o ícone grande em cima, o nome (o link do registro) e os dados
   embaixo em cinza, as ações da linha no canto; o «Ordenar por» em cima, com os mesmos links do cabeçalho */
.tabela-grade-wrap { overflow-x: visible; }
.tabela-grade-ordem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-esp-2, 8px);
  margin: 0 0 var(--v-esp-3, 12px); font-size: .8rem; color: var(--suave); }
.tabela-grade-ordem .th-ordem { display: inline-flex; align-items: center; gap: var(--v-esp-1, 4px);
  color: var(--tinta); text-decoration: none; }
.tabela-grade-ordem .th-ordem:is(:hover, :focus-visible) { text-decoration: underline; }
.tabela-grade-ordem button.th-ordem { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.tabela-grade-ordem-col[aria-current="true"] .th-ordem { font-weight: 700; color: var(--verde-esc); }
.tabela-grade { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--v-esp-3, 12px);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.tabela-bloco { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--v-esp-1, 4px);
  min-width: 0; padding: var(--v-esp-3, 12px) var(--v-esp-2, 8px); border: 1px solid var(--linha);
  border-radius: var(--v-raio, 8px); background: var(--e-cartao, #fff); text-align: center; font-size: .82rem; }
.tabela-bloco:hover { background: var(--e-sutil, #eef1f0); }
.tabela-bloco.nao-realiza { opacity: .6; }
.tabela-bloco-icone { color: var(--verde); line-height: 0; margin-bottom: var(--v-esp-1, 4px); }
.tabela-bloco-titulo { max-width: 100%; font-weight: 600; overflow-wrap: anywhere; color: var(--tinta); }
.tabela-bloco-titulo a { color: inherit; text-decoration: none; }
.tabela-bloco-titulo a:is(:hover, :focus-visible) { color: var(--verde-esc); text-decoration: underline; }
.tabela-bloco-dado { max-width: 100%; color: var(--suave); font-size: .76rem; overflow-wrap: anywhere; }
.tabela-bloco-acoes { position: absolute; top: var(--v-esp-1, 4px); right: var(--v-esp-1, 4px); }
.tabela-grade-wrap > .tabela-vazia { padding: var(--v-esp-4, 16px) var(--v-esp-2, 8px); }
@media (max-width: 420px) { .tabela-grade { grid-template-columns: 1fr 1fr; } }
/* o ícone no começo da célula (o tipo do arquivo antes do nome): alinhado ao texto, com o respiro */
table.t td > svg.ic:first-child { vertical-align: -3px; margin-right: var(--v-esp-1, 4px); }

/* — a disposição do Bitrix24 (a fase L, L1f, 26/10/2026: docs/layout-bitrix.md §2.4); tudo só com os atributos novos */
/* a caixa (com o rodapé ou o lote preso): a raiz sem desenho; quem rola de lado é o .tabela-wrap de dentro, e o lote
   e o rodapé ficam fora dele (não rolam com a tabela larga) */
/* a engrenagem das colunas, no canto do cabeçalho (ao lado da caixa de «todos», como no Bitrix24) */
table.t .tabela-engrenagem { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem;
  height: 1.5rem; padding: 0; border: 0; border-radius: var(--v-raio-ctrl, 6px); background: none;
  color: var(--suave); vertical-align: middle; cursor: pointer; }
table.t .tabela-engrenagem:is(:hover, :focus-visible) { color: var(--verde-esc); background: var(--e-sutil, #eef1f0); }
table.t th.tabela-sel input + .tabela-engrenagem { margin-left: var(--v-esp-1, 4px); }
table.t th.tabela-sel input { vertical-align: middle; }
/* a janela das colunas: uma linha por coluna (a caixa de mostrar e as setas de subir e descer) */
.tabela-colunas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--v-esp-1, 4px); }
.tabela-colunas-item { display: flex; align-items: center; gap: var(--v-esp-1, 4px);
  padding: var(--v-esp-1, 4px) var(--v-esp-2, 8px); border: 1px solid var(--linha);
  border-radius: var(--v-raio-ctrl, 8px); background: var(--e-cartao, #fff); }
.tabela-colunas-marca { flex: 1; display: flex; align-items: center; gap: var(--v-esp-2, 8px); min-width: 0; margin: 0;
  font-weight: 500; color: var(--tinta); cursor: pointer; overflow-wrap: anywhere; }
.tabela-colunas-marca input { flex: none; margin: 0; accent-color: var(--verde); cursor: pointer; }
.tabela-colunas-item:has(input:not(:checked)) .tabela-colunas-marca { color: var(--suave); }
/* a PRIMEIRA COLUNA PRESA à esquerda ao rolar de lado (e a da caixa de marcar, antes dela, com a largura fixa). Rolada
   (o data-rolada do gancho .ColunaPresa), as presas ganham o fundo do cartão por baixo, opaco — no acrílico, o vidro
   sobre a base sólida do tema (--acr-base): o vidro sozinho deixava ler o que rola por baixo, e desfoque na célula
   não, que o desempenho das linhas não deixa (temas.css) —, a zebra, a passada e a marcada por cima, como nas outras,
   e a linha da beirada separa o que está preso do que rola; parada, a tabela fica igual à de sempre */
.tabela-fixa { --tabela-sel-w: 2.5rem;
  --tabela-preso: linear-gradient(var(--branco, #fff), var(--branco, #fff)), var(--acr-base, var(--branco, #fff)); }
.tabela-fixa:has(.tabela-engrenagem) { --tabela-sel-w: 3.75rem; }
.tabela-fixa > table.t :is(th, td).tabela-sel { width: var(--tabela-sel-w); min-width: var(--tabela-sel-w);
  max-width: var(--tabela-sel-w); }
.tabela-fixa > table.t :is(th, td):is(.tabela-sel, .tabela-c1) { position: sticky; left: 0; z-index: 1; }
.tabela-fixa > table.t th:is(.tabela-sel, .tabela-c1) { z-index: 2; }
.tabela-fixa > table.t:has(.tabela-sel) :is(th, td).tabela-c1 { left: var(--tabela-sel-w); }
.tabela-fixa[data-rolada] > table.t :is(th, td).tabela-c1 { box-shadow: inset -1px 0 0 var(--linha); }
.tabela-fixa[data-rolada] > table.t td:is(.tabela-sel, .tabela-c1) { background: var(--tabela-preso); }
.tabela-fixa[data-rolada] > table.t th:is(.tabela-sel, .tabela-c1) {
  background: linear-gradient(var(--v-cab, var(--verde-fundo)), var(--v-cab, var(--verde-fundo))), var(--tabela-preso); }
.tabela-fixa[data-rolada] > table.t tbody > tr:nth-child(even) > td:is(.tabela-sel, .tabela-c1) {
  background: linear-gradient(var(--v-zebra, transparent), var(--v-zebra, transparent)), var(--tabela-preso); }
.tabela-fixa[data-rolada] > table.t tbody > tr:has(> td):hover > td:is(.tabela-sel, .tabela-c1) {
  background: linear-gradient(var(--v-linha-hover, var(--e-sutil, #eef1f0)), var(--v-linha-hover, var(--e-sutil, #eef1f0))),
    var(--tabela-preso); }
.tabela-fixa[data-rolada] > table.t tbody > tr:has(> td.tabela-sel > input:checked) > td:is(.tabela-sel, .tabela-c1) {
  background: linear-gradient(var(--verde-claro), var(--verde-claro)), var(--tabela-preso); }
/* o LOTE PRESO: embaixo da tabela, preso no pé da tela enquanto há linhas marcadas (fora da caixa que rola de lado);
   no cartão que rola de lado (.card:has(table), cartao.css) o lote não prenderia: com ele à mostra, o cartão não rola
   (quem rola é a caixa da tabela) */
.tabela-lote.tabela-lote-preso { position: sticky; left: auto; bottom: var(--v-esp-2, 8px); z-index: 3;
  margin: var(--v-esp-2, 8px) 0 0; box-shadow: var(--v-sombra-2, 0 12px 32px rgba(16, 32, 24, .2));
  /* por cima das linhas que passam por baixo: a cor dele sobre a base sólida do tema (no acrílico, a cor é vidro) */
  background: linear-gradient(var(--verde-claro), var(--verde-claro)), var(--acr-base, var(--branco, #fff)); }
.card:has(.tabela-lote-preso) { overflow-x: visible; }
/* o RODAPÉ: os selecionados à esquerda, a paginação no meio («Mostrando…» e as páginas) e o «Por página» à direita */
.tabela-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-esp-2, 8px) var(--v-esp-4, 16px);
  margin-top: var(--v-esp-2, 8px); padding-top: var(--v-esp-2, 8px); border-top: 1px solid var(--linha);
  font-size: .85rem; }
.tabela-rodape > .lista-paginas { flex: 1 1 auto; padding: 0; }
.tabela-rodape-sel { margin: 0; color: var(--e-suave, var(--suave)); }
.tabela-rodape-sel b { color: var(--e-tinta, var(--tinta)); font-weight: 650; font-variant-numeric: tabular-nums; }
.tabela-rodape .lista-por { margin-left: auto; }
@media (max-width: 640px) { .tabela-rodape { flex-direction: column; align-items: stretch; }
  .tabela-rodape .lista-por { margin-left: 0; justify-content: flex-end; } }

/* — os dados do ERP (a frente E0a, 27/10/2026: docs/erp.md §7, o que o Omie tem em toda lista); tudo só com os
   atributos novos (a soma, o agrupar, a edição na célula, o filtro inteiro e o resumo do lote) */
/* a barra em cima da tabela: o «Agrupar por ▾» (o seletor) e o recolher e abrir os grupos */
.tabela-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-esp-2, 8px);
  margin-bottom: var(--v-esp-2, 8px); }
/* a linha do grupo: o botão que recolhe e abre, o valor da coluna, a contagem e os subtotais */
table.t tr.tabela-grupo > td { background: var(--e-sutil, #eef1f0); font-weight: 600; color: var(--tinta);
  border-bottom: 1px solid var(--linha); vertical-align: middle; }
table.t td.tabela-grupo-rotulo { white-space: nowrap; }
.tabela-grupo-bt { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
  margin-right: var(--v-esp-1, 4px); padding: 0; border: 0; border-radius: var(--v-raio-ctrl, 6px); background: none;
  color: var(--suave); vertical-align: middle; cursor: pointer; }
.tabela-grupo-bt:is(:hover, :focus-visible) { color: var(--verde-esc); background: var(--e-cartao, #fff); }
.tabela-grupo-n { display: inline-block; min-width: 1.5rem; margin-left: var(--v-esp-2, 8px);
  padding: 0 var(--v-esp-1, 4px); border-radius: 999px; background: var(--e-cartao, #fff); color: var(--suave);
  font-size: .75rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
/* as somas: uma linha por moeda, os números alinhados à direita */
.tabela-soma { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* o rodapé dos totais: o rótulo (um <th> da linha) e os valores com o mesmo fundo em todos os temas — o :root vence o
   cabeçalho de vidro do acrílico (temas.css), que é do <thead> */
:root table.t tfoot.tabela-totais :is(th, td) { padding: 7px 8px; border-top: 2px solid var(--linha);
  border-bottom: 1px solid var(--linha); font-weight: 650; color: var(--tinta); background: var(--verde-fundo);
  vertical-align: top; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root table.t tfoot.tabela-totais th.tabela-soma-rotulo { position: static; text-align: left; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .02em; color: var(--suave); }
:root table.t tfoot.tabela-totais tr.tabela-totais-sel > :is(th, td) { border-top: 1px solid var(--linha);
  background: var(--verde-claro); color: var(--verde-esc); }
/* a célula que se edita: o lápis aparece ao passar e no foco (o teclado chega nele pelo Tab), no canto direito sem
   ocupar lugar (o número alinhado à direita fica alinhado com a soma); o editor ocupa a célula; gravando, o valor novo
   apagado; recusada, a borda vermelha e o aviso no lápis */
table.t td.tabela-edita { position: relative; cursor: text; }
.tabela-edita-bt { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); display: inline-flex;
  align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: 0; border: 0;
  border-radius: var(--v-raio-ctrl, 6px); background: var(--e-cartao, #fff); color: var(--suave); opacity: 0;
  cursor: pointer; }
table.t td.tabela-edita:hover .tabela-edita-bt, .tabela-edita-bt:focus-visible { opacity: 1; }
.tabela-edita-bt:is(:hover, :focus-visible) { color: var(--verde-esc); background: var(--e-sutil, #eef1f0); }
table.t td.tabela-recusada { box-shadow: inset 0 0 0 2px var(--vermelho); }
table.t td.tabela-recusada .tabela-edita-bt { opacity: 1; color: var(--vermelho); }
table.t td.tabela-gravando .tabela-novo { color: var(--suave); font-style: italic; }
table.t td.tabela-editando { padding-block: 2px; }
.tabela-editor { margin: 0; }
.tabela-editor .campo { margin: 0; }
.tabela-editor :is(input, select) { width: 100%; min-width: 7rem; }
/* o aviso da célula (gravando, mudou com o «Desfazer», recusada): a região existe sempre; com o aviso, a faixa */
.tabela-aviso.tabela-aviso-com { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-esp-2, 8px);
  margin-bottom: var(--v-esp-2, 8px); padding: var(--v-esp-1, 4px) var(--v-esp-3, 12px); border: 1px solid var(--linha);
  border-radius: var(--v-raio-ctrl, 8px); background: var(--e-cartao, #fff); font-size: .85rem; }
.tabela-aviso-texto { margin-right: auto; }
.tabela-aviso.tabela-aviso-recusada { border-color: var(--vermelho); color: var(--vermelho); }
.tabela-aviso.tabela-aviso-gravada, .tabela-aviso.tabela-aviso-desfeita { border-color: var(--verde);
  color: var(--verde-esc); }
/* o filtro inteiro, na barra do lote: «Os 50 desta página estão marcados. Selecionar todos os 1.234 deste filtro» */
.tabela-todos-filtro { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--v-esp-1, 4px); }
.tabela-todos-filtro-bt { padding: 0; border: 0; background: none; color: var(--verde-esc); font: inherit;
  font-weight: 650; text-decoration: underline; cursor: pointer; }
.tabela-lote-filtro { color: var(--verde-esc); font-weight: 600; }
/* o resumo antes do lote: em quantos, as somas, os campos da ação e o que vai mudar */
.tabela-resumo { display: grid; gap: var(--v-esp-3, 12px); }
.tabela-resumo-quantos { margin: 0; }
.tabela-resumo-somas { display: grid; grid-template-columns: auto 1fr; gap: var(--v-esp-1, 4px) var(--v-esp-3, 12px);
  margin: 0; }
.tabela-resumo-somas dt { grid-column: 1; color: var(--suave); }
.tabela-resumo-somas dd { grid-column: 2; margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.tabela-resumo-mudancas { margin: 0; padding-left: 1.2em; }
@media (max-width: 640px) { .tabela-barra { flex-direction: column; align-items: stretch; } }