/* 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). */

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

.fila-topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 20px; margin: 16px 0 12px;
}
.fila-topo > .acoes-linha { margin: 0; }
.fila-resumo-linha {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 0;
  color: var(--tinta-fraca); font-size: 13px;
}
.fila-resumo-linha strong {
  margin-right: 1px; color: var(--tinta); font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.fila-resumo-linha span:first-child strong { font-size: 21px; 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 14px; padding: 12px 14px 8px; }
.fila-pagina .busca-pendencias > form { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 12px; }
.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: 6px 4px; white-space: nowrap; }
.fila-pagina .busca-pendencias > p.recuo { margin: 6px 2px 0; color: var(--tinta-terciaria); font-size: 11.5px; line-height: 1.5; }
.fila-pagina .busca-pendencias > p:empty { display: none; }

.fila-anuncio {
  position: absolute !important; 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 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 10px;
}
.fila-alternar-visao { flex: none; }
.fila-alternar-visao button { min-width: 74px; }
.fila-filtros-rapidos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0;
}
.fila-filtro {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 3px 5px 3px 11px;
  border: 1px solid var(--linha-forte); border-radius: 999px; background: var(--superficie-cartao);
  color: var(--tinta); font: inherit; font-size: 13px; font-weight: 560; 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(--tinta-terciaria);
}
.fila-filtro-urgente::before { background: var(--vermelho); box-shadow: 0 0 0 2px var(--vermelho-claro); }
.fila-filtro-atrasado::before { background: #d6453d; border-radius: 2px; }
.fila-filtro-heranca::before { background: #b7791f; }
.fila-filtro-atual::before { background: var(--acento); }
.fila-filtro:hover { border-color: color-mix(in srgb, var(--tinta-fraca) 55%, transparent); }
.fila-filtro-conta {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--controle-fundo); color: var(--tinta-fraca);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fila-filtro[aria-pressed="true"] {
  border-color: var(--acento); background: var(--acento-suave); color: var(--azul-interativo);
}
.fila-filtro[aria-pressed="true"] .fila-filtro-conta { background: var(--acento); color: #fff; }
.fila-filtro-limpar {
  min-height: 32px; padding: 4px 10px; border: 0; border-radius: 999px; background: transparent;
  color: var(--azul-interativo); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.fila-filtro-limpar:hover { background: var(--acento-suave); }
.fila-proximo {
  display: inline-flex; align-items: center; gap: 9px; min-height: 36px; margin-left: auto;
  padding: 5px 7px 5px 14px; border: 0; border-radius: 11px; background: var(--acento); color: #fff;
  font: inherit; font-size: 13px; font-weight: 640; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(10, 102, 214, .3),
    0 6px 16px -8px rgba(10, 102, 214, .55);
  transition: background-color .15s ease, transform .1s ease;
}
.fila-proximo:hover { background: var(--acento-forte); }
.fila-proximo:active { transform: scale(.98); }
.fila-proximo-rotulo::after { content: " →"; }
.fila-proximo-alvo {
  padding-left: 9px; border-left: 1px solid rgba(255, 255, 255, .32); font-weight: 520;
  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 5px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; background: rgba(255, 255, 255, .16);
  font: 650 11px/1 var(--fonte-mono);
}
.fila-filtro-resumo { margin: -2px 0 10px; color: var(--tinta-fraca); font-size: 12.5px; }
.fila-filtro-resumo strong { color: var(--tinta); font-variant-numeric: tabular-nums; }

.fila-criterios { margin: 0 0 12px; }
.fila-criterios > summary { font-size: 13px; }
.fila-criterios-extra, .fila-atalhos {
  max-width: 110ch; margin: 10px 0 0; color: var(--tinta-fraca); font-size: 12.5px; line-height: 1.6;
}
.fila-criterios kbd {
  display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid var(--linha-forte);
  border-bottom-width: 2px; border-radius: 5px; background: var(--papel); color: var(--tinta);
  font: 600 11px/17px var(--fonte-mono); text-align: center;
}

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

.quadro-nucleos {
  --quadro-coluna-fundo: color-mix(in srgb, var(--superficie-terciaria) 72%, transparent);
  --quadro-topo-fundo: color-mix(in srgb, var(--superficie-terciaria) 93%, transparent);
  --quadro-cartao-fundo: var(--papel);
  --quadro-cartao-borda: var(--linha);
  position: relative; margin: 4px 0 8px;
}
html[data-tema="escuro"] .quadro-nucleos {
  --quadro-coluna-fundo: rgba(255, 255, 255, .03);
  --quadro-topo-fundo: color-mix(in srgb, #15171c 92%, transparent);
  --quadro-cartao-fundo: var(--superficie-elevada);
  --quadro-cartao-borda: rgba(255, 255, 255, .085);
}
.quadro-seletor { display: none; }
.quadro-trilho {
  display: grid; grid-template-columns: repeat(var(--quadro-colunas, 2), minmax(0, 1fr));
  gap: 16px; align-items: start;
}
.quadro-coluna {
  --cor-nucleo: var(--acento); --cor-nucleo-claro: var(--acento-suave);
  position: relative; min-width: 0; padding: 0 10px 10px; container: quadro-coluna / inline-size;
  border: 1px solid var(--vidro-contorno); border-radius: 18px; background: var(--quadro-coluna-fundo);
}
.quadro-coluna[data-nucleo="fiscal"] {
  --cor-nucleo: var(--nucleo-fiscal, #0f8a6c); --cor-nucleo-claro: var(--nucleo-fiscal-claro, rgba(15, 138, 108, .1));
}
.quadro-coluna[data-nucleo="consultivo_administrativo"] {
  --cor-nucleo: var(--nucleo-consultivo, #5b5bd6); --cor-nucleo-claro: var(--nucleo-consultivo-claro, rgba(91, 91, 214, .1));
}

/* 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: 6px 9px;
  margin: 0 -10px 6px; padding: 14px 14px 11px;
  border-radius: 17px 17px 0 0; border-bottom: 1px solid var(--linha);
  background: var(--quadro-topo-fundo);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  box-shadow: inset 0 3px 0 var(--cor-nucleo);
}
.quadro-coluna-topo h3 {
  display: flex; align-items: center; gap: 9px; min-width: 0; margin: 0;
  color: var(--tinta); font-size: 14.5px; font-weight: 680; 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 8px;
  border-radius: 999px; background: var(--cor-nucleo-claro); color: var(--cor-nucleo);
  font-size: 12px; font-weight: 760; font-variant-numeric: tabular-nums;
}
.quadro-pilulas { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.quadro-pilula {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 650; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.quadro-pilula.urgentes { color: var(--vermelho); background: var(--vermelho-claro); }
.quadro-pilula.urgentes::before { content: "!"; font-weight: 850; }
.quadro-pilula.atrasados { color: var(--tinta-fraca); background: var(--controle-fundo); }
.quadro-pilula.atrasados::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho);
}
/* 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: 4px; }
details.quadro-grupo > summary {
  display: flex; align-items: center; gap: 8px; padding: 7px 6px 7px 4px; list-style: none;
  border-radius: 8px; color: var(--tinta-fraca); font-size: 12.5px; font-weight: 650;
  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 4px 0 5px;
  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(--tinta); background: var(--controle-fundo); }
.quadro-grupo-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; min-width: 0; }
.quadro-grupo-titulo small { color: var(--tinta-terciaria); font-size: 11.5px; font-weight: 500; }
.quadro-grupo-conta {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-left: auto;
  padding: 0 6px; border-radius: 999px; background: var(--controle-fundo); color: var(--tinta-fraca);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.quadro-grupo-vazio {
  display: flex; align-items: center; gap: 8px; padding: 7px 6px 7px 23px;
  color: var(--tinta-terciaria); font-size: 12.5px; font-weight: 600;
}
.quadro-grupo-vazio small { display: none; }
.quadro-grupo-nada { margin-left: auto; font-size: 11.5px; font-weight: 500; }
.quadro-coluna-vazia {
  margin: 6px 0 2px; padding: 26px 14px; border: 1.5px dashed var(--linha-forte); border-radius: 12px;
  color: var(--tinta-fraca); font-size: 13px; text-align: center;
}
.quadro-coluna-vazia::before {
  content: "✓"; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 8px;
  border-radius: 50%; background: var(--verde-claro); color: var(--verde); font-weight: 800;
}

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

.quadro-cartoes { display: grid; gap: 8px; margin: 2px 0 6px; padding: 0; list-style: none; }
.quadro-item { min-width: 0; border-radius: 12px; }
.quadro-cartao {
  position: relative; display: grid; gap: 3px; min-width: 0; padding: 9px 12px 9px 14px;
  border: 1px solid var(--quadro-cartao-borda); border-radius: 12px; background: var(--quadro-cartao-fundo);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05); 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: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 26px -16px rgba(16, 24, 40, .32);
}
.quadro-cartao:focus-visible {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 32%, transparent), 0 10px 26px -16px rgba(16, 24, 40, .32);
}
.quadro-cartao.urgente::before {
  content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--vermelho);
}
.quadro-cartao.proximo {
  border-color: color-mix(in srgb, var(--acento) 50%, var(--quadro-cartao-borda));
  box-shadow: 0 0 0 3px var(--acento-suave), 0 1px 2px rgba(16, 24, 40, .05);
}
.quadro-cartao.proximo:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 38%, transparent);
}

/* Linha 1: ordem, número, contexto, dias e responsável. */
.quadro-cartao-cabeca { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 24px; }
.quadro-cartao-cabeca .prioridade-selo {
  flex: none; min-width: 0; padding: 1px 7px; font-size: 10.5px; line-height: 1.5; letter-spacing: .02em;
}
.quadro-cartao-cabeca .marca-atencao { flex: none; margin: 0; padding: 0 6px; font-size: 10.5px; }
.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(--tinta); font-size: 13.5px; font-weight: 700; letter-spacing: .003em;
  text-decoration: none; white-space: nowrap;
}
.quadro-cartao-id .link-dossie:hover { color: var(--azul-interativo); 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: 6px; background: transparent;
  color: var(--tinta-terciaria); font-size: 12px; opacity: 0; transition: opacity .15s ease;
}
.quadro-cartao-id .botao-copiar:hover { background: var(--controle-fundo); color: var(--azul-interativo); }
.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(--tinta-terciaria);
  font-size: 12px; text-overflow: ellipsis; white-space: nowrap;
}
.quadro-proximo-selo {
  display: inline-flex; flex: none; align-items: center; gap: 4px; height: 20px; padding: 0 8px;
  border-radius: 999px; background: var(--acento-suave); color: var(--azul-interativo);
  font-size: 11px; font-weight: 720; letter-spacing: .01em;
}
.quadro-proximo-selo::before { content: "→"; }
.quadro-cartao-fim { display: flex; flex: none; align-items: center; gap: 8px; margin-left: auto; }
.quadro-dias {
  display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-fraca);
  font-size: 12px; font-weight: 560; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.quadro-dias .bolinha { width: 8px; height: 8px; }
.quadro-dias.ambar { color: var(--ambar); }
.quadro-dias.vermelho { color: var(--vermelho); font-weight: 700; }
.quadro-avatar {
  position: relative; display: inline-grid; flex: none; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--superficie-terciaria); color: var(--tinta-fraca);
  font-size: 10px; font-weight: 720; letter-spacing: .02em;
}
.quadro-avatar.designado { border: 1.5px dashed var(--linha-forte); background: transparent; }
.quadro-avatar.meu { background: var(--acento-suave); color: var(--azul-interativo); border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.quadro-avatar.editando::after {
  content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: #34c759; 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(--tinta); font-size: 13.5px; line-height: 1.42; overflow-wrap: anywhere;
}
.quadro-cartao-objeto strong { font-weight: 650; }

/* Linha 3: etiquetas curtas. */
.quadro-cartao-chips { display: flex; flex-wrap: nowrap; gap: 5px; min-width: 0; margin-top: 3px; overflow: hidden; }
.quadro-cartao-chips.transborda {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.quadro-chip {
  display: inline-flex; flex: none; align-items: center; max-width: 280px; height: 21px; padding: 0 8px;
  overflow: hidden; border-radius: 6px; background: var(--controle-fundo); color: var(--tinta-fraca);
  font-size: 11.5px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap;
}
.quadro-chip.especie { border: 1px solid var(--linha-forte); background: transparent; color: var(--tinta); }
.quadro-chip.situacao { background: var(--azul-claro); color: var(--azul); }
.quadro-chip.situacao-devolvido { background: var(--ambar-claro); color: var(--ambar); }
.quadro-chip.gestao-heranca { background: var(--ambar-claro); color: var(--ambar); }
.quadro-chip.gestao-atual { background: transparent; color: var(--tinta-terciaria); padding: 0 2px; }
.quadro-chip.destaque { background: var(--acento-suave); color: var(--azul-interativo); font-weight: 650; }
.quadro-chip.interessado { color: var(--tinta); font-weight: 620; }
.quadro-chip.data { padding: 0 2px; background: transparent; color: var(--tinta-terciaria); }

/* 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: 6px; }
.quadro-acao-principal {
  min-height: 28px; padding: 4px 12px; border: 0; border-radius: 8px; background: var(--acento);
  color: #fff; font: inherit; font-size: 12.5px; font-weight: 630; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(10, 102, 214, .3);
}
.quadro-acao-principal:hover { background: var(--acento-forte); }
.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: 8px; background: var(--quadro-cartao-fundo);
  color: var(--tinta-fraca); font: 700 15px/1 var(--fonte-interface); cursor: pointer;
}
.quadro-mais:hover, .quadro-mais[aria-expanded="true"] { background: var(--controle-fundo-hover); color: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .quadro-cartao-acoes {
    position: absolute; right: 8px; bottom: 6px; padding-left: 40px;
    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;
  }
}
@media not ((hover: hover) and (pointer: fine)) {
  .quadro-cartao-acoes { margin-top: 5px; }
  .quadro-acao-principal {
    min-height: 36px; padding: 6px 14px; background: var(--acento-suave); color: var(--azul-interativo); box-shadow: none;
  }
  .quadro-cartao.proximo .quadro-acao-principal { background: var(--acento); color: #fff; }
  .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: 6px; border: 1px solid var(--vidro-contorno); border-radius: 12px; background: var(--vidro-forte);
  color: var(--tinta); font-size: 13px; box-shadow: var(--sombra-elevada);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
}
.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: 18px; width: 100%;
  min-height: 32px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--tinta); font: inherit; font-size: 13px; font-weight: 520; text-align: left; cursor: pointer;
}
.quadro-menu-item:hover, .quadro-menu-item:focus-visible { background: var(--acento-suave); outline: none; }
.quadro-menu-item kbd { color: var(--tinta-terciaria); font: 500 11px/1 var(--fonte-mono); }
.quadro-menu-rotulo {
  margin: 4px 0 0; padding: 8px 10px 3px; border-top: 1px solid var(--linha);
  color: var(--tinta-terciaria); font-size: 10.5px; font-weight: 700; 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: 4px; 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: -7px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--tinta-terciaria); font-size: 13px; line-height: 1; cursor: grab;
}
.quadro-alca:hover { background: var(--controle-fundo); color: var(--tinta); }
.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(--acento);
}

@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(--acento-suave), 0 0 0 3px color-mix(in srgb, var(--acento) 45%, transparent); }
    100% { box-shadow: 0 0 0 3px var(--acento-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 10px; background: var(--vidro-forte); box-shadow: 0 0 0 1px var(--vidro-contorno), var(--sombra-suave);
    -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
  }
  .quadro-seletor button { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 7px; min-width: 0; }
  .quadro-seletor-conta {
    display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--controle-fundo); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .quadro-trilho {
    display: flex; gap: 12px; padding-bottom: 4px; 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: 12px; }
}
@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: 8px; }
  .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 8px 8px; }
  .quadro-coluna-topo { margin: 0 -8px 6px; padding: 12px 12px 10px; }
  .fila-barra { gap: 10px; }
  .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 12px; font-size: 12.5px; }
  .quadro-cartao { padding: 10px 11px 10px 13px; }
  .quadro-cartao-cabeca { flex-wrap: wrap; row-gap: 4px; }
  .quadro-cartao-contexto { order: 5; flex-basis: 100%; }
}