/* =====================================================================
   Tabelas e "Ver dados em tabela" dos gráficos
   Fonte: /mockup/css/style.css (seção 15). Partial: componentes/_tabela_grafico
   ===================================================================== */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { font-size: var(--tamanho-md); }
.tabela th { text-align: left; font-size: var(--tamanho-xs); font-weight: var(--peso-semibold); color: var(--texto-3); text-transform: uppercase; letter-spacing: .03em; padding: var(--espaco-2-5) var(--espaco-3); border-bottom: 1px solid var(--borda); white-space: nowrap; background: var(--superficie-2); }
.tabela td { padding: var(--espaco-2-5) var(--espaco-3); border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num, .tabela th.num { text-align: right; white-space: nowrap; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela-compacta td, .tabela-compacta th { padding: var(--espaco-1-5) var(--espaco-2); }
@media (max-width: 640px) {
  .tabela { font-size: var(--tamanho-sm); }
  .tabela th, .tabela td { padding: var(--espaco-2); }
  .ocultar-mobile { display: none; }
}

.tabela-grafico { margin-top: var(--espaco-3); font-size: var(--tamanho-sm); }
.tabela-grafico summary { cursor: pointer; color: var(--texto-2); font-weight: var(--peso-semibold); width: fit-content; padding: var(--espaco-0-5) 0; }
.tabela-grafico summary:hover { color: var(--texto); }
.tabela-grafico .tabela-rolagem { margin-top: var(--espaco-2); }