/* e-PGM · quadro da fila por núcleo ("O que falta").
 *
 * Carregada depois de movimento.css. Desenha o quadro (núcleos lado a lado,
 * cartões curtos), a barra de filtros rápidos e o alternador Quadro | Lista.
 * Usa só os tokens das camadas anteriores; não muda a lista, que continua
 * com as tabelas de sempre. Remover o <link> deixa o quadro legível, sem
 * colunas lado a lado.
 *
 * Referências de desenho: quadros do Linear e do GitHub Projects (colunas
 * com contagem, cartão curto, ação ao passar o mouse, teclado), Jira (grupos
 * recolhíveis e sinal de atraso), SEI (duas listas lado a lado) e sistemas
 * jurídicos de prazos (contador de dias com cor). */

@layer componentes {

/* ---------- topo da página ---------- */

.fila-topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-3) var(--e-5); margin: var(--e-4) 0 var(--e-3);
}
.fila-topo > .acoes-linha { margin: 0; }
.fila-resumo-linha {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-4); margin: 0;
  color: var(--texto-2); font-size: var(--fs-2);
}
.fila-resumo-linha strong {
  margin-right: 1px; color: var(--texto); font-size: var(--fs-4); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.fila-resumo-linha span:first-child strong { font-size: var(--fs-5); letter-spacing: -.025em; }
.fila-resumo-curto { display: none; }

/* Busca da fila em uma linha: termo, Buscar, Limpar e filtros avançados. */
.fila-pagina .busca-pendencias { margin: 0 0 var(--e-4); padding: var(--e-3) var(--e-4) var(--e-2); }
.fila-pagina .busca-pendencias > form { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--e-2) var(--e-3); }
.fila-pagina .busca-pendencias-termo > label {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.fila-pagina .busca-pendencias-avancada:not([open]) { grid-column: auto; }
.fila-pagina .busca-pendencias-avancada > summary { padding: var(--e-2) var(--e-1); white-space: nowrap; }
.fila-pagina .busca-pendencias > p.recuo { margin: var(--e-2) 2px 0; color: var(--texto-3); font-size: var(--fs-1); line-height: 1.5; }
.fila-pagina .busca-pendencias > p:empty { display: none; }

.fila-anuncio {
   width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- barra: visão, filtros rápidos, próximo ---------- */

.fila-barra {
  /* 16 px até o quadro, a lista ou o calendário (ajustes de 25/10, item 6a). */
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); margin: 0 0 var(--e-4);
}
.fila-alternar-visao { flex: none; }
.fila-alternar-visao button { min-width: 74px; }
.fila-filtros-rapidos {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); flex: 1 1 auto; min-width: 0;
}
.fila-filtro {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: 32px; padding: var(--e-1) var(--e-1) var(--e-1) var(--e-3);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-pilula); background: var(--superficie);
  color: var(--texto); font: inherit; font-size: var(--fs-2); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.fila-filtro::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--neutro-medio);
}
.fila-filtro-urgente::before { background: var(--vencido); box-shadow: 0 0 0 2px var(--vencido-suave); }
.fila-filtro-atrasado::before { background: var(--vencido); border-radius: var(--raio-1); }
.fila-filtro-heranca::before { background: var(--atencao); }
.fila-filtro-atual::before { background: var(--acao); }
.fila-filtro:hover { border-color: color-mix(in srgb, var(--texto-2) 55%, transparent); }
.fila-filtro-conta {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 var(--e-2);
  border-radius: var(--raio-pilula); background: var(--neutro-suave); color: var(--texto-2);
  font-size: var(--fs-1); font-weight: 600; font-variant-numeric: tabular-nums;
}
.fila-filtro[aria-pressed="true"] {
  border-color: var(--acao); background: var(--acao-suave); color: var(--link);
}
.fila-filtro[aria-pressed="true"] .fila-filtro-conta { background: var(--acao); color: var(--texto-sobre-acao); }
.fila-filtro-limpar {
  min-height: 32px; padding: var(--e-1) var(--e-3); border: 0; border-radius: var(--raio-pilula); background: transparent;
  color: var(--link); font: inherit; font-size: var(--fs-2); font-weight: 600; cursor: pointer;
}
.fila-filtro-limpar:hover { background: var(--acao-suave); }
.fila-proximo {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: 36px; margin-left: auto;
  padding: var(--e-1) var(--e-2) var(--e-1) var(--e-4); border: 0; border-radius: var(--raio-2); background: var(--acao); color: var(--texto-sobre-acao);
  font: inherit; font-size: var(--fs-2); font-weight: 600; cursor: pointer; white-space: nowrap;
  box-shadow: var(--sombra-1);
  transition: background-color .15s ease, transform .1s ease;
}
.fila-proximo:hover { background: var(--acao-hover); }
.fila-proximo:active { transform: scale(.98); }
.fila-proximo-rotulo::after { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: var(--icone-seguir) center / contain no-repeat; mask: var(--icone-seguir) center / contain no-repeat; margin-left: var(--e-1); }
.fila-proximo-alvo {
  padding-left: var(--e-2); border-left: 1px solid var(--linha-forte); font-weight: 500;
  font-variant-numeric: tabular-nums; opacity: .92;
}
/* Nome longo no "Continuar do próximo": reticências, nunca além da tela; o
   nome inteiro fica na dica do botão. */
.fila-proximo { max-width: 100%; min-width: 0; }
.fila-proximo-alvo { min-width: 0; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; }
.fila-proximo kbd {
  display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 var(--e-1);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-1); background: var(--neutro-suave);
  font: 650 11px/1 var(--fonte-mono);
}
.fila-filtro-resumo { margin: -2px 0 var(--e-3); color: var(--texto-2); font-size: var(--fs-2); }
.fila-filtro-resumo strong { color: var(--texto); font-variant-numeric: tabular-nums; }

.fila-criterios { margin: 0 0 var(--e-3); }
.fila-criterios > summary { font-size: var(--fs-2); }
.fila-criterios-extra, .fila-atalhos {
  max-width: 110ch; margin: var(--e-3) 0 0; color: var(--texto-2); font-size: var(--fs-2); line-height: 1.6;
}
.fila-criterios kbd {
  display: inline-block; min-width: 20px; padding: 0 var(--e-1); border: 1px solid var(--linha-forte);
  border-bottom-width: 2px; border-radius: var(--raio-1); background: var(--superficie); color: var(--texto);
  font: 600 11px/17px var(--fonte-mono); text-align: center;
}

/* ---------- quadro ---------- */

.quadro-nucleos {
  --quadro-coluna-fundo: color-mix(in srgb, var(--superficie-3) 72%, transparent);
  --quadro-topo-fundo: color-mix(in srgb, var(--superficie-3) 93%, transparent);
  --quadro-cartao-fundo: var(--superficie);
  --quadro-cartao-borda: var(--linha);
  position: relative; margin: var(--e-1) 0 var(--e-2);
}
html[data-tema="escuro"] .quadro-nucleos {
  --quadro-coluna-fundo: var(--neutro-suave);
  --quadro-topo-fundo: color-mix(in srgb, var(--superficie) 92%, transparent);
  --quadro-cartao-fundo: var(--superficie);
  --quadro-cartao-borda: var(--linha);
}
.quadro-seletor { display: none; }
.quadro-trilho {
  display: grid; grid-template-columns: repeat(var(--quadro-colunas, 2), minmax(0, 1fr));
  gap: var(--e-4); align-items: start;
}
.quadro-coluna {
  --cor-nucleo: var(--texto-3); --cor-nucleo-claro: var(--neutro-suave);
  position: relative; min-width: 0; padding: 0 var(--e-3) var(--e-3); container: quadro-coluna / inline-size;
  border: 1px solid var(--linha); border-radius: var(--raio-3); background: var(--quadro-coluna-fundo);
}
.quadro-coluna[data-nucleo="fiscal"] {
  --cor-nucleo: var(--texto-3); --cor-nucleo-claro: var(--neutro-suave);
}
.quadro-coluna[data-nucleo="consultivo_administrativo"] {
  --cor-nucleo: var(--texto-3); --cor-nucleo-claro: var(--neutro-suave);
}

/* Cabeçalho da coluna: fixo ao rolar, com a cor do núcleo no alto. */
.quadro-coluna-topo {
  position: sticky; top: var(--quadro-topo, 0px); z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-2);
  margin: 0 calc(var(--e-3) * -1) var(--e-2); padding: var(--e-4) var(--e-4) var(--e-3);
  border-radius: var(--raio-3) var(--raio-3) 0 0; border-bottom: 1px solid var(--linha);
  background: var(--quadro-topo-fundo);
   
  box-shadow: inset 0 3px 0 var(--cor-nucleo);
}
.quadro-coluna-topo h3 {
  display: flex; align-items: center; gap: var(--e-2); min-width: 0; margin: 0;
  color: var(--texto); font-size: var(--fs-3); font-weight: 600; letter-spacing: -.012em;
}
.quadro-coluna-topo h3 > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quadro-coluna-topo h3::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cor-nucleo); box-shadow: 0 0 0 3px var(--cor-nucleo-claro);
}
.quadro-coluna-total {
  display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 var(--e-2);
  border-radius: var(--raio-pilula); background: var(--cor-nucleo-claro); color: color-mix(in srgb, var(--cor-nucleo) 70%, var(--texto));
  font-size: var(--fs-1); font-weight: 600; font-variant-numeric: tabular-nums;
}
.quadro-pilulas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-left: auto; }
.quadro-pilula {
  display: inline-flex; align-items: center; gap: var(--e-2); height: 22px; padding: 0 var(--e-2);
  border-radius: var(--raio-pilula); font-size: var(--fs-1); font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.quadro-pilula.urgentes { color: var(--vencido); background: var(--vencido-suave); }
.quadro-pilula.urgentes::before { content: "!"; font-weight: 600; }
.quadro-pilula.atrasados { color: var(--texto-2); background: var(--neutro-suave); }
.quadro-pilula.atrasados::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vencido);
}
/* Coluna estreita: cabeçalho em uma linha só, contagens sem a palavra
 * (que continua para leitores de tela e na dica). */
@container quadro-coluna (max-width: 560px) {
  .quadro-coluna-topo { flex-wrap: nowrap; }
  .quadro-pilula-rotulo {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Grupos dentro da coluna: requerimentos, ordem de entrega, retornos. */
.quadro-grupo + .quadro-grupo { margin-top: var(--e-1); }
details.quadro-grupo > summary {
  display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-1); list-style: none;
  border-radius: var(--raio-2); color: var(--texto-2); font-size: var(--fs-2); font-weight: 600;
  line-height: 1.4; cursor: pointer; user-select: none;
}
details.quadro-grupo > summary::-webkit-details-marker { display: none; }
details.quadro-grupo > summary::before {
  content: ""; flex: none; width: 6px; height: 6px; margin: 0 var(--e-1) 0 var(--e-1);
  border: solid currentColor; border-width: 0 1.6px 1.6px 0; rotate: -45deg;
  transition: rotate .2s var(--mov-curva, ease);
}
details.quadro-grupo[open] > summary::before { rotate: 45deg; }
details.quadro-grupo > summary::after,
details.quadro-grupo[open] > summary::after { content: none; display: none; }
details.quadro-grupo > summary:hover { color: var(--texto); background: var(--neutro-suave); }
.quadro-grupo-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--e-2); min-width: 0; }
.quadro-grupo-titulo small { color: var(--texto-3); font-size: var(--fs-1); font-weight: 500; }
.quadro-grupo-conta {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-left: auto;
  padding: 0 var(--e-2); border-radius: var(--raio-pilula); background: var(--neutro-suave); color: var(--texto-2);
  font-size: var(--fs-1); font-weight: 600; font-variant-numeric: tabular-nums;
}
.quadro-grupo-vazio {
  display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-5);
  color: var(--texto-3); font-size: var(--fs-2); font-weight: 600;
}
.quadro-grupo-vazio small { display: none; }
.quadro-grupo-nada { margin-left: auto; font-size: var(--fs-1); font-weight: 500; }
.quadro-coluna-vazia {
  margin: var(--e-2) 0 2px; padding: var(--e-5) var(--e-4); border: 1.5px dashed var(--linha-forte); border-radius: var(--raio-2);
  color: var(--texto-2); font-size: var(--fs-2); text-align: center;
}
.quadro-coluna-vazia::before {
  content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: var(--icone-confere) center / contain no-repeat; mask: var(--icone-confere) center / contain no-repeat; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto var(--e-2);
  border-radius: 50%; background: var(--ok-suave); color: var(--ok); font-weight: 600;
}

/* ---------- cartões ---------- */

.quadro-cartoes { display: grid; gap: var(--e-2); margin: 2px 0 var(--e-2); padding: 0; list-style: none; }
.quadro-item { min-width: 0; border-radius: var(--raio-2); }
.quadro-cartao {
  position: relative; display: grid; gap: var(--e-1); min-width: 0; padding: var(--e-2) var(--e-3) var(--e-2) var(--e-4);
  border: 1px solid var(--quadro-cartao-borda); border-radius: var(--raio-2); background: var(--quadro-cartao-fundo);
  box-shadow: var(--sombra-1); cursor: pointer; outline: none;
  scroll-margin: calc(var(--quadro-topo, 0px) + 72px) 12px 18px;
  transition: border-color .15s ease, box-shadow .18s ease;
}
.quadro-cartao:hover {
  border-color: var(--linha-forte);
  box-shadow: var(--sombra-1);
}
.quadro-cartao:focus-visible {
  border-color: var(--acao);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acao) 32%, transparent);
}
.quadro-cartao.atrasado::before {
  content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 var(--raio-1) var(--raio-1) 0; background: var(--vencido);
}
.quadro-cartao.proximo {
  border-color: color-mix(in srgb, var(--acao) 50%, var(--quadro-cartao-borda));
  box-shadow: 0 0 0 3px var(--acao-suave), var(--sombra-1);
}
.quadro-cartao.proximo:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acao) 38%, transparent);
}

/* Linha 1: ordem, número, contexto, dias e responsável. */
.quadro-cartao-cabeca { display: flex; align-items: center; gap: var(--e-2); min-width: 0; min-height: 24px; }
.quadro-cartao-cabeca .prioridade-selo {
  flex: none; min-width: 0; padding: 1px var(--e-2); font-size: var(--fs-1); line-height: 1.5; letter-spacing: .02em;
}
.quadro-cartao-cabeca .marca-atencao { flex: none; margin: 0; padding: 0 var(--e-2); font-size: var(--fs-1); }
.quadro-cartao-id { flex: none; min-width: 0; font-variant-numeric: tabular-nums slashed-zero; }
.quadro-cartao-id .dado-copiavel { align-items: center; gap: 2px; white-space: nowrap; }
.quadro-cartao-id .link-dossie {
  color: var(--texto); font-size: var(--fs-3); font-weight: 600; letter-spacing: .003em;
  text-decoration: none; white-space: nowrap;
}
.quadro-cartao-id .link-dossie:hover { color: var(--link); text-decoration: underline; }
.quadro-cartao-id .botao-copiar,
html[data-tema="escuro"] .quadro-cartao-id .botao-copiar {
  width: 22px; height: 22px; border-color: transparent; border-radius: var(--raio-1); background: transparent;
  color: var(--texto-3); font-size: var(--fs-1); opacity: 0; transition: opacity .15s ease;
}
.quadro-cartao-id .botao-copiar:hover { background: var(--neutro-suave); color: var(--link); }
.quadro-cartao:hover .botao-copiar, .quadro-cartao:focus-within .botao-copiar,
.quadro-cartao-id .botao-copiar.copiado { opacity: 1; }
/* Número longo ("PA 002/2026 - CONTRATO 045/2025 - 3º TERMO ADITIVO…") não
   atravessa a borda do cartão: toma a linha inteira e quebra nos espaços,
   com o nome todo à vista; os selos ao lado descem. Número curto continua
   em uma linha, ao lado do "Próximo". */
.quadro-cartao-cabeca { flex-wrap: wrap; row-gap: 2px; }
.quadro-cartao-id { flex: 0 1 auto; max-width: 100%; }
.quadro-cartao-id .dado-copiavel { max-width: 100%; white-space: normal; }
.quadro-cartao-id .link-dossie,
.quadro-cartao-id .dado-copiavel-texto { white-space: normal; overflow-wrap: break-word; }
.quadro-cartao-contexto {
  flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--texto-3);
  font-size: var(--fs-1); text-overflow: ellipsis; white-space: nowrap;
}
.quadro-proximo-selo {
  display: inline-flex; flex: none; align-items: center; gap: var(--e-1); height: 20px; padding: 0 var(--e-2);
  border-radius: var(--raio-pilula); background: var(--acao-suave); color: var(--link);
  font-size: var(--fs-1); font-weight: 600; letter-spacing: .01em;
}
.quadro-proximo-selo::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: var(--icone-seguir) center / contain no-repeat; mask: var(--icone-seguir) center / contain no-repeat; }
.quadro-cartao-fim { display: flex; flex: none; align-items: center; gap: var(--e-2); margin-left: auto; }
.quadro-dias {
  display: inline-flex; align-items: center; gap: var(--e-2); color: var(--texto-2);
  font-size: var(--fs-1); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.quadro-dias .bolinha { width: 8px; height: 8px; }
.quadro-dias.ambar { color: var(--atencao); }
.quadro-dias.vermelho { color: var(--vencido); font-weight: 600; }
.quadro-avatar {
  position: relative; display: inline-grid; flex: none; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--superficie-3); color: var(--texto-2);
  font-size: var(--fs-1); font-weight: 600; letter-spacing: .02em;
}
.quadro-avatar.designado { border: 1.5px dashed var(--linha-forte); background: transparent; }
.quadro-avatar.meu { background: var(--acao-suave); color: var(--link); border-color: color-mix(in srgb, var(--acao) 45%, transparent); }
.quadro-avatar.editando::after {
  content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 2px var(--quadro-cartao-fundo);
}

/* Linha 2: objeto em até duas linhas. */
.quadro-cartao-objeto {
  display: -webkit-box; margin: 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  color: var(--texto); font-size: var(--fs-3); line-height: 1.42; overflow-wrap: anywhere;
}
.quadro-cartao-objeto strong { font-weight: 600; }

/* Linha 3: etiquetas curtas. */
.quadro-cartao-chips { display: flex; flex-wrap: nowrap; gap: var(--e-1); min-width: 0; margin-top: var(--e-1); overflow: hidden; }
.quadro-cartao-chips.transborda {
  -webkit-mask-image: linear-gradient(to right, var(--superficie) calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, var(--superficie) calc(100% - 32px), transparent);
}
.quadro-chip {
  display: inline-flex; flex: none; align-items: center; max-width: 280px; height: 21px; padding: 0;
  overflow: hidden; border: 0; border-radius: 0; background: transparent; color: var(--texto-3);
  font-size: var(--fs-1); font-weight: 400; text-overflow: ellipsis; white-space: nowrap;
}
/* Linha de dados do cartão: no máximo três, separados por ponto. */
.quadro-cartao-chips { gap: 0; }
.quadro-cartao-chips .quadro-chip { flex: 0 1 auto; min-width: 0; }
/* Urgência e vencimento nunca encolhem; só o destino corta, com reticências
   (revisão 5.13.0, item 3: "Urgente" virava "Urgen" e o vencimento sumia). */
.quadro-cartao-chips > .quadro-chip { flex: 0 0 auto; }
.quadro-cartao-chips > .quadro-chip-destino { flex: 0 1 auto; min-width: 0; }
.quadro-cartao-chips .quadro-chip + .quadro-chip::before { content: "·"; margin: 0 var(--e-1); color: var(--texto-3); }
.quadro-cartao-chips .quadro-chip:nth-child(n + 4) { display: none; }
.quadro-chip.cartao-urgente { color: var(--vencido); font-weight: 500; }
.quadro-chip.alerta { color: var(--vencido); font-weight: 500; }

/* Ações: a principal à vista no toque; no mouse, ao passar ou ao focar. */
.quadro-cartao-acoes { display: flex; align-items: center; justify-content: flex-end; gap: var(--e-2); }
.quadro-acao-principal {
  min-height: 28px; padding: var(--e-1) var(--e-3); border: 0; border-radius: var(--raio-2); background: var(--acao);
  color: var(--texto-sobre-acao); font: inherit; font-size: var(--fs-2); font-weight: 600; white-space: nowrap; cursor: pointer;
  box-shadow: var(--sombra-1);
}
.quadro-acao-principal:hover { background: var(--acao-hover); }
.quadro-mais {
  display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--quadro-cartao-borda); border-radius: var(--raio-2); background: var(--quadro-cartao-fundo);
  color: var(--texto-2); font: 700 15px/1 var(--fonte); cursor: pointer;
}
.quadro-mais:hover, .quadro-mais[aria-expanded="true"] { background: var(--neutro-medio); color: var(--texto); }
@media (hover: hover) and (pointer: fine) {
  .quadro-cartao-acoes {
    position: absolute; right: 8px; bottom: 6px; padding-left: var(--e-7);
    background: linear-gradient(to right, transparent, var(--quadro-cartao-fundo) 34px);
    opacity: 0; transition: opacity .15s ease;
  }
  .quadro-cartao:hover .quadro-cartao-acoes, .quadro-cartao:focus-within .quadro-cartao-acoes,
  .quadro-cartao.proximo .quadro-cartao-acoes, .quadro-cartao-acoes:has(.quadro-mais[aria-expanded="true"]) {
    opacity: 1;
  }
  /* No cartão "Próximo" a ação fica sempre à vista: então vai em fluxo, embaixo, e não cobre
     a linha de dados (o vencimento ficava escondido atrás do botão; 5.14.1). */
  .quadro-cartao.proximo .quadro-cartao-acoes { position: static; margin-top: var(--e-2); padding: 0; background: none; }
}
@media not ((hover: hover) and (pointer: fine)) {
  .quadro-cartao-acoes { margin-top: var(--e-1); }
  .quadro-acao-principal {
    min-height: 36px; padding: var(--e-2) var(--e-4); background: var(--acao-suave); color: var(--link); box-shadow: none;
  }
  .quadro-cartao.proximo .quadro-acao-principal { background: var(--acao); color: var(--texto-sobre-acao); }
  .quadro-mais { width: 36px; height: 36px; }
  .quadro-cartao-id .botao-copiar { opacity: .7; }
  .quadro-cartao-chips { flex-wrap: wrap; }
  .quadro-cartao-chips.transborda { -webkit-mask-image: none; mask-image: none; }
  .fila-proximo kbd { display: none; }
}

/* Menu "⋯": camada superior (popover), fora do corte da coluna. */
.quadro-menu {
  position: fixed; inset: auto; margin: 0; min-width: 232px; max-width: min(330px, calc(100vw - 16px));
  padding: var(--e-2); border: 1px solid var(--linha); border-radius: var(--raio-2); background: var(--superficie);
  color: var(--texto); font-size: var(--fs-2); box-shadow: var(--sombra-2);
   
}
.quadro-menu:popover-open { display: flex; flex-direction: column; gap: 1px; }
.quadro-menu.sem-popover { display: none; position: absolute; top: auto; right: 0; bottom: calc(100% + 4px); z-index: 30; }
.quadro-menu.sem-popover.aberto { display: flex; flex-direction: column; gap: 1px; }
.quadro-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); width: 100%;
  min-height: 32px; padding: var(--e-2) var(--e-3); border: 0; border-radius: var(--raio-2); background: transparent;
  color: var(--texto); font: inherit; font-size: var(--fs-2); font-weight: 500; text-align: left; cursor: pointer;
}
.quadro-menu-item:hover, .quadro-menu-item:focus-visible { background: var(--acao-suave); outline: none; }
.quadro-menu-item kbd { color: var(--texto-3); font: 500 11px/1 var(--fonte-mono); }
.quadro-menu-rotulo {
  margin: var(--e-1) 0 0; padding: var(--e-2) var(--e-3) var(--e-1); border-top: 1px solid var(--linha);
  color: var(--texto-3); font-size: var(--fs-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.quadro-menu-rotulo:first-child { margin-top: 0; border-top: 0; }
.quadro-menu > .quadro-menu-item:last-child { margin-top: var(--e-1); box-shadow: 0 -5px 0 -4px var(--linha); }

/* Arrastar pela alça, na ordem de entrega. */
.quadro-alca {
  flex: none; width: 18px; height: 24px; margin-left: calc(var(--e-2) * -1); padding: 0; border: 0; border-radius: var(--raio-1);
  background: transparent; color: var(--texto-3); font-size: var(--fs-2); line-height: 1; cursor: grab;
}
.quadro-alca:hover { background: var(--neutro-suave); color: var(--texto); }
.lista-arrastavel .quadro-item.item-arrastavel.arrastando { opacity: .45; background: transparent; }
.lista-arrastavel .quadro-item.item-arrastavel.alvo-arrastar {
  outline: 0; background: transparent; box-shadow: 0 -3px 0 -1px var(--acao);
}

@media (prefers-reduced-motion: no-preference) {
  .quadro-cartao.destaque { animation: quadro-realce 1.1s var(--mov-curva, ease-out) 2; }
  @keyframes quadro-realce {
    0% { box-shadow: 0 0 0 3px var(--acao-suave), 0 0 0 3px color-mix(in srgb, var(--acao) 45%, transparent); }
    100% { box-shadow: 0 0 0 3px var(--acao-suave), 0 0 0 14px transparent; }
  }
}

/* ---------- telas menores: colunas deslizam, uma de cada vez ---------- */

@media (max-width: 1099.98px) {
  .quadro-seletor {
    position: sticky; top: var(--quadro-topo, 0px); z-index: 6; display: flex; width: 100%;
    margin: 0 0 var(--e-3); background: var(--superficie); box-shadow: 0 0 0 1px var(--linha), var(--sombra-1);
     
  }
  .quadro-seletor button { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: var(--e-2); min-width: 0; }
  .quadro-seletor-conta {
    display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 var(--e-2); border-radius: var(--raio-pilula);
    background: var(--neutro-suave); font-size: var(--fs-1); font-weight: 600; font-variant-numeric: tabular-nums;
  }
  .quadro-trilho {
    display: flex; gap: var(--e-3); padding-bottom: var(--e-1); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .quadro-trilho::-webkit-scrollbar { display: none; }
  .quadro-coluna { flex: 0 0 calc(100% - 56px); scroll-snap-align: start; scroll-snap-stop: always; }
  .quadro-coluna-topo { position: static; }
  .fila-topo { margin-top: var(--e-3); }
}
@media (max-width: 640px) {
  .fila-resumo-longo { display: none; }
  .fila-resumo-curto { display: inline; }
  .fila-topo > .acoes-linha { width: 100%; }
  .fila-topo > .acoes-linha > .acao { flex: 1 1 auto; }
  .fila-pagina .busca-pendencias > form { grid-template-columns: auto minmax(0, 1fr); }
  .fila-pagina .busca-pendencias-termo { grid-column: 1 / -1; }
  .fila-pagina .busca-pendencias > form > .acoes-linha { flex-wrap: nowrap; gap: var(--e-2); }
  .fila-pagina .busca-pendencias-avancada:not([open]) { justify-self: end; min-width: 0; }
  .fila-pagina .busca-pendencias > p.recuo { display: none; }
  .quadro-coluna { flex-basis: 100%; padding: 0 var(--e-2) var(--e-2); }
  .quadro-coluna-topo { margin: 0 calc(var(--e-2) * -1) var(--e-2); padding: var(--e-3) var(--e-3) var(--e-3); }
  .fila-barra { gap: var(--e-3); }
  .fila-alternar-visao { width: 100%; }
  .fila-alternar-visao button { flex: 1 1 0; }
  .fila-proximo { width: 100%; justify-content: center; margin-left: 0; }
  .fila-resumo-linha { gap: 2px var(--e-3); font-size: var(--fs-2); }
  .quadro-cartao { padding: var(--e-3) var(--e-3) var(--e-3) var(--e-3); }
  .quadro-cartao-cabeca { flex-wrap: wrap; row-gap: var(--e-1); }
  .quadro-cartao-contexto { order: 5; flex-basis: 100%; }
}

}