.filtros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; align-items: end;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px; margin-bottom: 14px;
}
.filtros .cresce { grid-column: span 2; }
.acoes-filtro { display: flex; gap: 8px; }
.acoes-filtro button { flex: 1; }

.resumo-lista { font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; min-height: 20px; }
.resumo-lista .fichas { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 8px; }
.ficha {
  font-family: var(--mono); font-size: 10.5px; padding: 2px 7px;
  border-radius: 999px; background: var(--sunk); border: 1px solid var(--line);
}

table.decisoes { width: 100%; border-collapse: collapse; font-size: 13px; }
table.decisoes th, table.decisoes td {
  padding: 8px 10px 8px 0; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.decisoes th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
}
table.decisoes tr.linha:hover { background: var(--sunk); }
table.decisoes td.acoes { text-align: right; white-space: nowrap; }
table.decisoes td.acoes button { padding: 4px 9px; font-size: 10.5px; }

.paginacao { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.paginacao .pos { font-size: 12.5px; color: var(--ink-faint); margin-left: auto; }

button.fechar {
  float: right; padding: 2px 8px; font-size: 10px; text-transform: lowercase;
}
.detalhe-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px;
}
.detalhe-grade div b {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 3px;
}
.detalhe-grade div span { font-family: var(--mono); font-size: 13px; }

/* No celular a tabela vira lista: seis colunas em 380px produzem texto de 6px
   ou rolagem horizontal, e as duas são ilegíveis. Cada linha vira um bloco com
   o rótulo ao lado do valor. */
@media (max-width: 720px) {
  .filtros .cresce { grid-column: span 1; }
  table.decisoes thead { display: none; }
  table.decisoes tr.linha {
    display: block; border: 1px solid var(--line); border-radius: var(--r);
    padding: 10px 12px; margin-bottom: 8px; background: var(--surface);
  }
  table.decisoes td {
    display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 10px;
    padding: 3px 0; border: 0;
  }
  table.decisoes td::before {
    content: attr(data-rotulo);
    font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  table.decisoes td.acoes { text-align: left; margin-top: 6px; }
  table.decisoes td.acoes::before { content: ""; }
}