/* O widget `matriz` (FeitoWeb.Widgets.Matriz, docs/telas.md §2). Linhas × colunas, a célula escolhe o valor (o
   nível). Trazido na etapa 3 (26/10/2026) do permissoes.css (a grade das Permissões, que saiu: os seletores
   #grade-tabela viraram o do widget) e da parte da grade do acessos.css (a célula sugerida e a mudada, a linha
   marcada e a que o endereço aponta), com as mesmas medidas e cores. 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). */

/* — do permissoes.css (Feito, 23/10/2026): colunas largas o bastante para o nome e o seletor (Romeu: «aumenta mais
   estas colunas»), a das linhas maior, e o seletor ocupando a coluna. Mede em rem, que segue o A− / A+. */
.tabela-wrap[data-widget="matriz"] td { min-width: 12rem; }
.tabela-wrap[data-widget="matriz"] td:first-child { min-width: 16rem; }
.tabela-wrap[data-widget="matriz"] thead th { vertical-align: bottom; }
.tabela-wrap[data-widget="matriz"] select { width: 100%; }
/* rolando de lado (muitas colunas), a coluna das linhas fica presa à esquerda: não se perde de quem é a linha */
.tabela-wrap[data-widget="matriz"] tbody td:first-child,
.tabela-wrap[data-widget="matriz"] thead tr:first-child th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--branco); }
.tabela-wrap[data-widget="matriz"] thead tr:first-child th:first-child { background: var(--verde-fundo); z-index: 2; }
/* na linha zebrada, a célula presa leva a zebra por cima do fundo (opaca: o que rola por baixo não aparece) */
.tabela-wrap[data-widget="matriz"] tbody tr:nth-child(even) > td:first-child {
  background: linear-gradient(var(--v-zebra), var(--v-zebra)), var(--branco); }
/* com filtro, as linhas de cima do que foi achado aparecem só para a árvore fazer sentido: apagadas */
.tabela-wrap[data-widget="matriz"] tr.gr-contexto > td:first-child b,
.tabela-wrap[data-widget="matriz"] tr.gr-contexto > td:first-child .ref { color: var(--suave); font-weight: 500; }

/* — do acessos.css: em azul, o valor proposto (a sugestão da IA); em amarelo, o mudado (ou o rascunho) */
.tabela-wrap[data-widget="matriz"] td.ac-sugerida { background: color-mix(in srgb, var(--azul-f) 70%, transparent); }
.tabela-wrap[data-widget="matriz"] td.ac-mudada { background: color-mix(in srgb, var(--amarelo-f) 80%, transparent); }
/* a linha marcada (o departamento que tem acesso): a barra na beirada, para achar no meio da árvore */
.tabela-wrap[data-widget="matriz"] tr.ac-tem > td:first-child { box-shadow: inset 3px 0 0 var(--verde); }
/* a linha que o endereço aponta (#dep-2, o link da sugestão): pisca ao chegar */
.tabela-wrap[data-widget="matriz"] tr:target > td { animation: matriz-alvo 1.6s ease; }
@keyframes matriz-alvo { from { background: color-mix(in srgb, var(--verde) 25%, transparent); } }

/* o salvar do rascunho (salvar={:no_botao}): a conta e os botões, presos à esquerda ao rolar de lado */
.matriz-salvar { position: sticky; left: 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--v-esp-2, 8px); margin-top: 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-fundo); }
.matriz-salvar-conta { margin-right: auto; color: var(--suave); font-size: .88rem; }
.tabela-wrap[data-widget="matriz"]:has(.ac-mudada) .matriz-salvar-conta { color: var(--amarelo); font-weight: 600; }